Как сделать красивую пунктирную рамку с закруглениями?

Question

Всем привет. Я сделал drag n drop input, и хочу, чтобы он был красивый) Но, мне не очень нравиться, что у моей пунктирной рамки с закруглениями немного, как будто, обрезаются края или что-то подобное. В общем, есть ли какой-нибудь вариант сделать это получше, чтобы в самих краях так же был отрезок с закруглениями? Делаю я, если что, на React + mui.

Answer 1

Попросите дизайнера создать штрихпунктирный путь path в svg квадратной формы, нужного размера и закругления, потом добавьте эту рамку через background к диву оббертки этой обрасти. Через CSS такого не получить, простыми способами.

Answer 2

Не?

div {
  height: 300px;
  width: 300px;
  background: #eee;
  border-radius: 20px;
  border: 5px dashed #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div>ee</div>

БЛОГ НА HUSL

Как сделать красивую пунктирную рамку с закруглениями?

Ответы (2 шт):