通常borderをグラデーションにしたい場合はborder-image に linear-gradient() か radial-gradient() をつけることで実装できます。
しかし「borderをグラデーションにした上で角を丸めたい」となると一工夫必要になるので、紹介しようと思います。
まず普通にborderの色をグラデーションにする例。
この時、border-colorを指定しないとborder-imageも表示されないので、transparentでも何でも良いので指定します。
また、border-imageに対応していないブラウザで閲覧した時は代わりにborder-colorの色で表示されます。
この状態で角を丸めたいのでborder-radiusを指定します。
効きません。
そんな時はCSSの::before/::afterを使用します。
- backgroundが全面グラデーションになっている角丸のブロックを下に敷く
- 上から1よりborderの分だけ小さくしたブロックを被せる
以上がCSSだけでborderがグラデーション＋角丸になっているブロックを作る方法になります。
端末によってはborder-imageが正しく表示されないことがあるみたいなので、角丸じゃなくてもこの方法で実装するのが安心です。
縦横のサイズが固定の時は画像にしてbackgroundに張り付けた方がもっと楽です。