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

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

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

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

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

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

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら