• HTMLCSS

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だけで簡単に再現が可能です。

ぜひ参考にしてみてください。

以上で解説を終わります。