Как коректно получить бордер? Чтобы не делать его svg?

Question

[frontAng]

Answer 1

[Антон Антон]

можно вложить элемент с белым в элемент с градиентом
можно сделать множественный бэкграунд
https://codepen.io/FragsterAt/pen/raNgpyj
видно, что с вложенным элементом красивее.

Comments

[Ankhena]

Лучше бы псевдоэлементы вместо пустых div.
Ещё вариант - масками (mask + mask-composite).

[Антон Антон]

Ankhena,

Лучше бы псевдоэлементы вместо пустых div.

добавил. как-то сильно больше кода получилось

Ещё вариант - масками (mask + mask-composite).

вот это уже лень, но можно, да

[Ankhena]

Антон Антон,

добавил. как-то сильно больше кода получилось

Песочницу не смотрела.
Но замена <div></div> на &::before {content: ""} не должна быть дать прям большой прибавки кода.

[Антон Антон]

Ankhena, ну там z-index нужен, размеры (разные), position у всего. не только before, но и after, иначе само содержимое никак не разместить, если оно не всё пространство занимает, раскраска белым должна быть под ним

[Ankhena]

Антон Антон, откуда столько?
Один псевдик с абсолютом и inset -2px

z-index либо банально -1, если фон позволяет.
Либо, если не позволяет, то с корректировкой родительского.

Зачем два псевдика я не придумала.

[Антон Антон]

Ankhena,

Зачем два псевдика я не придумала.

это я чуть тупанул. если убрать overflow и сделать отрицательный inset то да, работает. только padding на margin заменить