Бордер с градиентом

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

border: 5px solid transparent;
border-image: linear-gradient(to top, red, yellow, green) 1;

Но это свойство не совместимо с border-radius, и если вам необходимо закруглить края, то придется воспользоваться дополнительной оберткой для блока:

<div class="block">
  <div class="inner-block"></div>
</div>

.block {
  padding: 4px;
  border-radius: 10px;
  background: linear-gradient(to top, red, yellow, green);
}

.inner-block {
  border-radius: 10px;
  background: #fff;
}

или использовать псевдоэлемент, но этот способ будет работать до тех пор, пока у родительских элементов не появится свой фон

.block {
  position: relative;
  background: #fff;
  border-radius: 10px;
}

.block::before {
  position: absolute;
  content: '';
  z-index: -1;
  inset: -5px;
  background: linear-gradient(to top, red, yellow, green);
  border-radius: 10px;
}

Чтобы бордер из псевдоэлемента был виден, воспользуемся свойством mask и mask-composite:

.block {
  position: relative;
  background: #fff;
}

.block::before {
  position: absolute;
  content: '';
  inset: -5px;
  padding: 5px;
  border-radius: 50px;
  background: linear-gradient(to top, red, yellow, green);
  mask: linear-gradient(fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
}

Размер бордера в этом случае регулируем через свойства padding и inset. И еще есть одна особенность, что чем больше мы сделаем обводку, тем меньше будет внутреннее скругление, вплоть до полного исчезновения.