Как сделать бордер по макету?

Question

[zveronol]

макет вот

https://jsfiddle.net/h4bq8rmv/

Comments

[Ярослав Иванов]

border-radius: 10px;

[Ankhena]

Я поддержу Ярослава.
Если клиента такое совпадение по какой-то причине не устроит (вряд ли), то через border-image или svg.

[zveronol]

Ярослав Иванов, Ankhena, понял Вас. но речь как раз была не о скруглении. а о разном расстоянии между пунктирами

[Василий Сергеевич]

zveronol, картинкой

[zveronol]

Ankhena, а тут возможно закруглить углы?
понятно что способ возможно не ок
но все -же

https://jsfiddle.net/ta7e3502/5/

[Ankhena]

zveronol, радиальным градиентом - да.
Но вы замучаетесь пристыковывать палочки.

И зачем вы нагородили абсолютный псевдо, если фон прекрасно применятся прямо к диву?

Answer 1

[Александр]

В вашей реализации нужно добавить еще border-radius, т.е.

.account__file {
  width: 230px;
  padding: 0 20px;
  padding-top: 75px;
  border: 2px dashed #8eb9f5;
  border-radius: 15px;
}

Лучше в css кажется не получится.
Другой вариант, можно заюзать svg. Т.е. подложить например под текст скругленный прямоугольник обведенный пунктиром.

<div class="account__file">
  <svg xmlns="http://www.w3.org/2000/svg" with="100%" height="100%" class="border">
    <rect x="0" y="0" rx="30" width="100%" height="100%" class="border-rect" />
  </svg>
  <input type="file" name="file" id="file" />
  <label for="file">
    <span class="account__subtitle">drag & drop</span>
    <div class="account__text">
      <p>Upload only png, jpg, jpeg</p>
    </div>
  </label>
</div>

классу .account__file прописать position: relative
css для svg:

.border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.border-rect {
  stroke: #8eb9f5;
  fill: #fff;
  stroke-width: 1;
  stroke-dasharray: 20;
}

Вот еще вариант с рамкой в качестве фона: https://z80b.github.io/qna.habr/

Comments

[zveronol]

z80b, спасибо
извините
такой нюанс
а бордер-радиус я тут могу менять?
и можно как то изменить свг чтобы было cовпадение по бокам? тоесть по бокам немного длинная линия
https://jsfiddle.net/g85m0b9s/1/

[Александр]

<rect x="0" y="0" rx="30" width="100%" height="100%" class="border-rect" />

rx - радиус углов прямоугольника

.border-rect {
  stroke: #8eb9f5;
  fill: #fff;
  stroke-width: 1;
  stroke-dasharray: 20;
}

stroke-width - ширина линии
stroke-dasharray - длина полосок (+расстояние между ними)

[Александр]

Или еще проще. Можно этот прямоугольник в редакторе svg нарисовать, а потом вставить в качестве фона. В редакторе можно поиграться с различными параметрами. Например можно взять Inkscape. https://inkscape.org/ru/release/inkscape-1.0.1/

Вот пример: https://z80b.github.io/qna.habr/

[zveronol]

z80b, спсибо огромное!!

Answer 2

[ReActor Дмитрий Вершанский]

.selector {
    border: dashed 1px #00f;
    border-radius: 8px;
}