CSSでborder（線）をグラデーションにする方法【サンプル付き】

borderってグラデーションに出来る？

枠線をちょっとおしゃれにしたい場合、グラデーションにするという方法があります。

コード自体は簡単なので、サンプルを使って解説していきます。

背景やボックス要素などをグラデーションにする方法は以下の記事を参照下さい。

CSSでborder（線）をグラデーションにする方法

まずは、今回ご紹介するサンプル（デモ）の共通のHTMLとCSSのコードを確認します。

<div class="box"></div>

CSSの書き方はこちら。

.box {
  border: 10px solid;
  height: 150px;
  margin-inline: auto;
  max-width: 600px;
  width: auto;
}

ここのポイントはborder: 10px solid;だけですが、線の太さを調整するくらいで、色はグラデーションで指定するので不要です。

左右にグラデーション

borderを左右にグラデーションにするコードはこちらです。

.box {
  border-image: linear-gradient(to right, #7f7fff, #7fff7f) 1;
}

これは、左から右に色を変化させています。

このような意味になります。

.box {
  border-image: linear-gradient(方向, 開始の色, 終了の色) 1;
}

そして最後の1はborder-imageのショートハンドで、個別に書く場合はこちらでも大丈夫です。

.box {
  border-image: linear-gradient(to right, #7f7fff, #7fff7f);
  border-image-slice: 1;
}

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

border-imageのrightをleftにすれば色は逆になります。

上下にグラデーション

borderを上下にグラデーションにするコードはこちらです。

.box {
  border-image: linear-gradient(to bottom, #7f7fff, #7fff7f) 1;
}

これは上から下に色を変化させています。

See the Pen
borderでグラデーション（上下） by junpei (@junpei-sugiyama)
on CodePen.

border-imageのbottomをtopにすれば色は逆になります。

3色でグラデーション

borderを3色でグラデーションするコードはこちらです。

.box {
  border-image: linear-gradient(to bottom, #7f7fff, #7fff7f, #ffbf7f) 1;
}

これは単純にカラーコードを1つ増やしただけですね。

もちろん3色以上も可能です。

See the Pen
borderでグラデーション（複数の色） by junpei (@junpei-sugiyama)
on CodePen.

See the Pen
borderでグラデーション（縦に3色） by junpei (@junpei-sugiyama)
on CodePen.

一部だけグラデーション

borderは、上下左右別々に書くことも出来ます。

例えば、左と下の線だけの場合はこちらです。

.box {
  border-bottom: 10px solid;
  border-left: 10px solid;
  border-image: linear-gradient(to right, #7f7fff, #7fff7f) 1;
}

See the Pen
borderでグラデーション（一部） by junpei (@junpei-sugiyama)
on CodePen.

円形にグラデーション

円形グラデーションは、放射線状に内側から外側に向かっていくグラデーションです。

コードはこちらです。

.box {
  border: 30px solid;
  border-image: radial-gradient(#7f7fff, #7fff7f) 49%;
}

円形の場合はlinear-gradientではなく、radial-gradientを使います。

方向の指定はなく、後ろに0%より大きく50%より小さい数値で色の割合を調整します（50%以上だと線が消えます）

ここでは、最後の1でborder-image-sliceを書くと均等に色が広がらないので書いていません。

あとは、グラデーションが分かりやすいように線を太くしています。

See the Pen
borderで円形グラデーション by junpei (@junpei-sugiyama)
on CodePen.

グラデーションで一周

最後は上下・左右・円形ではなく、ぐるっと一周するグラデーションです。

コードはこちらです。

.box {
  border-image: conic-gradient(#7f7fff, #7fff7f, #ffff7f, #ff7f7f, #ff7fff, #7f7fff) 1;
}

カラーコードが全部似ててややこしいですが、このようになります。

.box {
  border-image: conic-gradient(開始の色, 2番目の色, 3番目の色, ・・・, 開始の色) 1;
}

注意点は、最後に開始の色を書かないと、最初と最後の色のつなぎ目がグラデーションになりません。

See the Pen
borderでグラデーション（一周失敗） by junpei (@junpei-sugiyama)
on CodePen.

開始の色を最初と最後に書けば、このようになります。

See the Pen
borderでグラデーション（一周） by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回は、border（線）をグラデーションにする方法を解説してきました。

グラデーションにするといっても色んな種類があり、色をtransparentにすれば片方は透明にすることも可能です。

例えば、見出しの上下左右に線を引くデザインはよくありますが、CSSで線の両端や片側の線を徐々に透過させる方法もあります。