CSS Web制作

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

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

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

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

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

あわせて読みたい
【コピペOK!】CSSグラデーションの作り方まとめ
【コピペOK!】CSSグラデーションの作り方まとめ

続きを見る

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

コーディングの時給アップにはこちら!

累計1080部突破!レビュー550件!

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-imagerightleftにすれば色は逆になります。

 

上下にグラデーション

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

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

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

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

border-imagebottomtopにすれば色は逆になります。

 

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の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1060部以上販売し、レビューは520件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

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

-CSS, Web制作