[CSS]ボーダーをグラデーションにしたい

ぽんきち

グラデーションをかけたボーダーをCSSで表現したいよ。。。

ボーダーにグラデーションをかけたい時、またはテキストの下線にグラデーションをかけたい時、どうしますか？？SVGなどの画像で書き出すことも出来ますが、出来ればCSSで表現したいですよね。

この記事の内容

では早速やっていきましょう。

グラデーションがかかったボーダーの設定方法

まずは枠線にグラデーションがかかったボーダーを設定する方法です。

See the Pen Untitled by kitaharas (@kitaharas) on CodePen.

通常のボーダーに設定するカラーではなく、border-imageというプロパティでグラデーションを設定しています。
設定値はto right(右に向かって)#e60012から#03a9f4にグラデーションで変わるようにしています。

さらにborder-image-sliceプロパティでborder-imageの適用範囲を設定します。
“1”は100％を表しているので端までborder-imageが適用されています。

先ほどの記述から応用して、擬似要素にborder-bottomを設定しグラデーションをかけてみます。

See the Pen Untitled by kitaharas (@kitaharas) on CodePen.

かかっていますね。

これでも良いのですが場合によっては角を丸くしたい時もあるかと思います。
そんな時は下記のように記述します。

See the Pen Untitled by kitaharas (@kitaharas) on CodePen.

先ほどのborderと違ってbackgroundにグラデーションを設定する方法です。
擬似要素（after）全体でグラデーションになっているのでborderの太さをheightで設定しています。

こうするとborder-radiusで角丸を再現することができます。

サイトの設計に合わせて使い分けていただくと良いかと思います。