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

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

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

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

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

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

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

まず共通のHTMLとCSSはこちらになります。

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

.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にすれば片方は透明にすることも可能です。

以上になります。