CSSだけでborder線にグラデーションを入れる方法【角丸も付ける】

CSSだけでborder(ボーダー)線にグラデーションを入れる方法を知りたい。
グラデーションを入れたが、border-radiusを付与しても角丸にならない。
角丸のグラデーションborderを作成したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
css border グラデ―ション by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
border下線がグラデーションのものが一つ。
角丸のグラデーションborderが一つ。
どちらもCSSだけで再現されてます。
実装手順は以下の通りです。
borderにグラデーションを入れるCSS
.border-gradation {
border-bottom: 4px solid;
border-image: linear-gradient(to right, #00ffd5 0%, #0f3dd7 100%);
border-image-slice: 1;
}
borderにグラデーションを入れるCSSコード例です。
border
でグラデーションを入れたい方向に太さ・線の種類を指定。
border-image: linear-gradient();
でグラデーションの色を二種指定。
border-image-sliceでborderの範囲を指定。
以上でグラデーションborderの完成です。
角丸のグラデーションborderを入れるCSS
.border-gradation-radius {
background: linear-gradient(to right, #00ffd5 0%, #0f3dd7 100%);
width: 100%;
padding: 3px;/*borderの太さ*/
border-radius: 30px;
}
.border-gradation-radius-wrap {
border-radius: 30px;
background: #fff;/*背景を白*/
padding: 20px;
}
角丸のグラデーションborderを入れるCSSコード例です。
前提としてグラデーションborderを入れたいhtml要素を任意の親要素で囲みます。
親要素にbackground
(背景)でグラデーションを指定。
padding
でborderの太さを指定。
子要素をbackground
で背景を白に指定。
親要素・子要素共にborder-radius
で角丸を指定。
以上で角丸グラデーションborderの完成です。
まとめ
今まで画像でグラデーションborderを入れて方、CSSだけで簡単に再現が可能です。
ぜひ参考にしてみてください。
以上で解説を終わります。