Все мы знаем свойство border-image, которое позволяет добавлять любые изображения (в том числе градиенты) в качестве границ.

.box {
  border: 10px solid;
  border-image: linear-gradient(45deg,red,blue) 10;
}

К сожалению, border-radius не поддерживается в border-image и приходится искать обходные пути, чтобы получить закруглённые границы с градиентом.

Вот трюк, который позволит добиться такого результата. Не требуется сложный код, SVG или несколько элементов! Всего две строки кода CSS с использованием свойства mask

.box {
  border-radius: 50px; /*1*/
  border: 10px solid transparent; /*2*/
  background: linear-gradient(45deg,red,blue) border-box; /*3*/
  mask: /*4*/
    linear-gradient(#000 0 0) padding-box, 
    linear-gradient(#000 0 0);
  mask-composite: exclude; /*5*/
}

Объяснение

(1)(2): Эти линии тривиальны.
(3): Мы применяем градиент в качестве фона и делаем его началом рамку (по умолчанию это рамка с отступами).
(4): Используя свойство mask, мы применяем два непрозрачных слоя. Нижний слой будет покрывать весь элемент, а верхний — только рамку с отступами (то есть не будет покрывать область рамки).
(5): Мы исключаем верхний слой из нижнего, чтобы была видна только область рамки!

Вот и все!

Теперь вы можете настроить границу, градиент и радиус по своему усмотрению. Единственный недостаток заключается в том, что это скроет содержимое, поэтому мы можем перенести код в псевдоэлемент

.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px; 
  padding: 10px; 
  background:linear-gradient(45deg,red,blue); 
  mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  mask-composite: exclude; 
}