Как сделать linear-gradient бордеру?

Question

[Елена]

Вот как этому https://codepen.io/Ponomareva1994/pen/NWXxZWQ?edit... сделать вот это

Comments

[Ankhena]

У вас это скорее SVG.
И, похоже, ещё и дуга с динамической длиной.

Если без скругленных углов у дуги:
border-image не умеет работать со скруглениями.
Поэтому, делают псевдо размером больше, чем элемент с градиентной заливкой и располагают его под элементом. Элемент красят в цвет фона.

Или попробовать прилепить их (скругления) доп фонами радиальными градиентами или псевдо.

Answer 1

[DanielTonne]

Вам нужно свойство border-image

https://developer.mozilla.org/en-US/docs/Web/CSS/b...

Comments

[Елена]

DanielTonne спасибо) Да, именно оно. Округление концов через псевдо делается? Или бордеру тоже можно скруглить?)

[DanielTonne]

Елена, псевдо или отрисовывать этот элемент с использованием svg

[Елена]

DanielTonne, спасибо)

[Ankhena]

DanielTonne, прям даже интересно, как вы с помощью border-image сделаете бордер со скруглениями