Written by Kasumi

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

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

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

目次

関連記事

HTMLCSS

CSSだけで台形を作る方法

更新日:2022.09.21
136
HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
2077
HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

2022.10.03
184
HTMLCSS プログラミング

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

更新日:2021.01.08
3916