用CSS簡單寫出漸層色的邊框與圓角（Gradient Border and Radius）

我們只要用很古老以前就存在的 border-image-source 和比較新的漸層語法 conic-gradient 互相結合就可以辦到。

簡單的漸層邊框範例

 #example-card{
  width: 200px;
  height: 200px;
  border: 20px solid hsl(80 100% 50%);
  border-image-slice: 1;

  border-image-source: conic-gradient(
    from 0deg,
    hsl(80 100% 50%), 
    hsl(200 100% 60%),
    hsl(80 100% 50%)
  );
}

EXAMPLE

因為 conic-gradient 的關係，這裡只要注意不要用在 IE 和舊 edge 就可以了。如果還是很擔心，其實用 linear-gradient 也可以。

邊框圓角

大家都知道，漸層屬性的CSS是寫在「xxx-image」底下（這裡是 border-image），而此屬性的 border-radius 會失效。因此，若要實現圓角就必須使用其它方法實現，這裡我們用擁有裁切功能的 clip-path。

clip-path: inset(0 round 24px);

inset 的意思是內部裁切，0 是貼合主體，這樣就能簡單實現外邊框圓角。