【CSS】borderにグラデーションを適用させる方法【たったの2行】

Web制作マン

・borderの色を途中で変えたい

・borderにグラデーションをつけたい

この記事ではこのような悩みを解決します。

今回はCSSのborder（ボーダー）について解説します。

通常、borderは単色で指定することが多いですが、デザイナーから「グラデーションにしたい」と言われたり、クライアントから「もう少しデザイン性を高めたい」と要望されることがあります。

そのような要望にすぐ対応できると、クライアントやユーザーの満足度向上にもつながります。本記事ではborderにグラデーションを適用する方法を解説します。

borderにグラデーションをつける方法

CSSに追加するコードは以下になります。

h1 {
  border-bottom: 5px solid red;
  border-image: linear-gradient(to right, red 0%, pink 100%) 1;
 }

このコードを追加すると、以下のようなborderが表示されます。

borderが左から赤→ピンクへとグラデーションになっていることが分かります。

ポイントは「border-image」プロパティで、この値を調整することで様々なグラデーションborderを作成できます。

border-imageプロパティの設定方法

ここではborder-imageの設定方法を解説します。

上のコードで設定した値は、「linear-gradient(to right, red 0%, pink 100%)」と「1」でした。これは「border-image-source」と「border-image-slice」をまとめて指定しているプロパティです。

詳しくはこちらをご覧ください。

https://developer.mozilla.org/ja/docs/Web/CSS/border-image

その中で「border-image-source」の値を変えることでグラデーションをつけることができます。

今回使用した「linear-gradient」はCSS関数で、色の変化を細かく設定できます。

linear-gradient(to right, red 0%, pink 100%)は「左の0%の位置から右に向かって赤色からピンクに変化していってね」という意味になります。

こちらの設定も以下サイトに詳しく書いてあるので自分で手を動かしてどう変化するのか試してみてください！

https://developer.mozilla.org/ja/docs/Web/CSS/gradient/linear-gradient

囲いのborderにも適用できる

1辺のborderだけではなくボタンなどの囲われたborderにも適用することができます。

CSSでの指定はこちらになります。

.btn-gra {
  display: inline-block;
  width: 80%;
  margin: 100px auto;
  border: 5px solid;
  border-image: linear-gradient(to bottom, red 0%, pink 100%) 1;
  text-decoration: none;
  color: #000;
}

このように囲まれたborderにも適用することができます。

グラデーション付きのborderでリッチな見た目を再現しよう

いかがでしたでしょうか？

linear-gradientの設定を調整することで、さまざまなグラデーション表現が可能です。ぜひ活用してデザイン性の高いborderを作ってみてください。

参考サイトで分かりにくい場合は、コメント欄やTwitterからお気軽にご質問ください。

今回はborderにグラデーションを付ける方法を紹介しましたが、点線borderの作り方もぜひ参考にしてみてください。

基本の作成方法からカスタマイズして自由なデザインの点線を作成する手順を紹介しています！