Как в css задать градиент для border?

@fidel 

Для задания градиента для границы в CSS можно использовать свойство border-image. Вот пример:

1
2
3
4
5
6

div {
  border: none;
  border-image: linear-gradient(to right, #ff0000, #0000ff);
  border-image-slice: 1;
  border-image-width: 1px;
}

Этот код задает градиентное изображение вдоль границы элемента div. Градиент идет от красного (#ff0000) к синему (#0000ff).

border-image-slice определяет какая часть границы будет заполнена градиентом, а border-image-width задает ширину границы.

@fidel 

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

1

border-image-repeat: round; /* градиент повторяется, чтобы заполнить границу целиком */

или

1

border-image-repeat: space; /* градиенты распределяются равномерно вдоль границы */

Помните, что поддержка градиентов для границ может быть ограничена в некоторых браузерах, и в некоторых случаях могут потребоваться дополнительные вендорные префиксы.