Как скруглить края обводки элемента?

Question

[classicartt]

Не понимаю, почему не скругляются края у обводки элемента.



Выглядить вот таким образом.

код:

.block {

                padding: 30px;
                width: 35%;
                background: rgba(255, 255, 255, 0.13);
                backdrop-filter: blur(47.5px);
                border: 1px solid transparent;
                border-image: linear-gradient(90deg, #C7C7C7, #717171);
                border-image-slice: 1;
                border-radius: 21px;

}

Comments

[Александр]

[Виталий Моржов]

Попробуйте добавить свойство overflow: hidden

Answer 1

[PageUp]

-webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;

Comments

[Ankhena]

Боюсь представить какие версии браузеров вы собрались поддерживать этими префиксами.
Ну и для border-image border-radius не работает.

[PageUp]

Ankhena, у меня все работает. Со своего файла скопировал. Работает безупречно в любых браузерах, хоть на изображениях, хоть на любых css элементах

[Ankhena]

PageUp, покажите, пожалуйста, как оно работает в сочетании с border-image?

Префикс -webkit был нужен для border-radius для хрома 4 (!!!) версии, a -moz для ФФ 3.6.
Т.е. последних лет 8 вы грузите пользователям мусор.
А также пишете этот мусор руками, не используя автопрефиксер. Я бы очень рекомендовала включить его в перечень рабочих инструментов.

[PageUp]

Ankhena, на моем сайте очень много людей с самых древних телефонов, которые вы даже представить себе не можете. И для меня задача не гнаться за трендами, а что бы даже на любом допотопном браузере и телефоне все работало у всех одинаково, благодаря этому, как вы выражаетесь "мусору".
Если б у меня не работало, я бы свой вариант не предлагал.
Можете что-то другое предложить человеку- предлагайте.
Я сюда не за спорами захожу.

[Ankhena]

PageUp, еще раз: border-radius не работает с border-image. И ваше решение НЕ решение.
А как делать на самом деле, уже и так есть в комментариях.