Код
<style>.box1 {
border: 10px solid;
border-image: linear-gradient(45deg, red, blue) 10;
}</style>
border: 10px solid;
border-image: linear-gradient(45deg, red, blue) 10;
}</style>
К сожалению, border-radius не работает совместно с border-image.
Это создаёт проблему: как получить закруглённые углы у границы с градиентом?
Ниже — эффективный трюк, позволяющий добиться такого результата.
Он не требует:
сложного кода, SVG, дополнительных HTML‑элементов.
Всё решается двумя строками CSS с использованием свойства mask.
Теперь вы можете настраивать:
ширину границы, градиент, радиус скругления — всё по своему усмотрению.
Единственный нюанс: такой подход скрывает содержимое элемента. Чтобы этого избежать, перенесём код в псевдоэлемент.
Код
<style>.box2 {
font-size: 60px;
text-align: center;
position: relative;
/* Резервируем место под рамку с помощью padding */
padding: 10px;
/* Углы здесь должны совпадать с углами в ::before для корректного фона, если он есть */
border-radius: 10px;
}
.box2:before {
content: "";
position: absolute;
/* Растягиваем на весь блок */
top: 0; left: 0; right: 0; bottom: 0;
/* Создаем форму рамки */
border-radius: 10px;
padding: 10px; /* Это будет толщина вашей рамки */
/* Фоновый градиент */
background: linear-gradient(45deg, red, blue);
/* Магия маски: вырезаем внутреннюю часть */
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; /* Для старых браузеров */
mask-composite: exclude; /* Оставляет только padding-область */
}
</style>
font-size: 60px;
text-align: center;
position: relative;
/* Резервируем место под рамку с помощью padding */
padding: 10px;
/* Углы здесь должны совпадать с углами в ::before для корректного фона, если он есть */
border-radius: 10px;
}
.box2:before {
content: "";
position: absolute;
/* Растягиваем на весь блок */
top: 0; left: 0; right: 0; bottom: 0;
/* Создаем форму рамки */
border-radius: 10px;
padding: 10px; /* Это будет толщина вашей рамки */
/* Фоновый градиент */
background: linear-gradient(45deg, red, blue);
/* Магия маски: вырезаем внутреннюю часть */
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; /* Для старых браузеров */
mask-composite: exclude; /* Оставляет только padding-область */
}
</style>
Радиус границы градиента
Здесь я заменил границу на отступы, чтобы сократить код.
Логика та же: мы исключаем область содержимого (content‑box) из области отступов (padding‑box), поэтому видимыми остаются только отступы, формирующие рамку.
