Чтобы использовать градиентные рамки в CSS, можно установить градиент в качестве значения свойства border-image. 2 Например:

.gradient-border {  border: 5px solid;  border-image: linear-gradient(45deg, purple, orange) 1;}

Ещё несколько подходов к созданию градиентных рамок в CSS:

1. Использование псевдоэлемента. 1 Нужно добавить градиент как фоновое изображение для псевдоэлемента. 1 Затем установить его положение в абсолютное и отрицательный отступ, который будет представлять ширину границы. 1 После этого задать отрицательный z-индекс, чтобы псевдоэлемент находился ниже основного элемента, и сделать так, чтобы он наследовал border-radius от основного элемента. 1
2. Использование свойства mask. 1 Нужно установить фоновое изображение элемента в виде градиента, а затем с помощью свойства mask указать ещё два фоновых изображения градиента (того же цвета, что и тело). 1
3. Комбинация свойств background-image и background-clip. 1 Нужно передать два значения градиента для свойства background-image. 1 Одно будет представлять фон элемента с соответствующим цветом, а второе — границу с градиентом. 1 Для каждого из градиентов указать свойство background-clip. 1 Для первого значение будет padding-box, поэтому фон будет распространяться до границы. 1 Для второго — border-box, что означает, что фон будет распространяться до внешней кромки границы. 1 В конце нужно указать прозрачный цвет границы и border-radius. 1

Чтобы анимировать градиентную заливку CSS-border, нужно с помощью настраиваемого свойства (CSS-переменной) добавить градиенту угол поворота, а для анимации изменять его значение в @keyframes. 2