Как сделать круглый бордюр не до конца?

Question

[Роман Черник]

Кто знает способ как можно добиться не полного доведения бордюра или все же проще изображение из макета экспортировать?

Answer 1

[Варлам Ерофеич]

Пол-радиуса на css делать легко, примеры есть в песочнице. Можно и четверть-радиуса попробовать сделать, ну а если чего "покруче", тогда уж svg, как в примере выше... Для разнообразия приведу пример "border-красоты" на css:
<div class="box"></div>

.box {
    margin: 1rem;
    width: 15rem;
    height: 15rem;
    box-sizing: border-box;
    text-align: center;
    vertical-align: center;
  border: 6.5rem solid transparent;
  border-image: radial-gradient(#bcc, #888 30%, 
        #e62 50%, #2cc, #828 69%, transparent 72%) 10% fill;
}

Эксперименты с бордером и не только: Песочница
Возможно там найдётся нечто и для вас полезное.
- И да, недавно нашёл более развёрнутый ответ

Answer 2

[Ivan Bogachev]

круглый бордюр

Можно хоть звездочкой его сделать - habr.com/post/349988/.

Answer 3

[rusglov]

svg