我們只要用很古老以前就存在的 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 是貼合主體，這樣就能簡單實現外邊框圓角。