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

Web制作マン

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

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

この記事ではこういった悩みを解決していきます。

今回はCSSのborderについての記事です。

borderには普段単色の色を指定することが多いと思いますが、デザイナーから「borderの色を途中からグラデーションで色を変えてほしい」と言われたり、クライアントから「borderをもう少しリッチにしたい」という要望がくることがあります。

そのような時に即座に対応できたり、いくつか自分からサンプルを作成して提案できたりするとクライアントやユーザーの満足度も上げることができると思いますのでborderにグラデーションをつける方法を解説していきます。

borderにグラデーションをつける方法
1. border-imageプロパティの設定方法
囲いの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-imageプロパティの設定方法

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

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

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

border-image - CSS: カスケーディングスタイルシート | MDN

border-image は CSS のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の境界を置き換えます。

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

今回使用した「lineaer-gradient」はCSSの関数で色の変化の詳細を設定することができます。

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

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

linear-gradient() - CSS: カスケーディングスタイルシート | MDN

linear-gradient() は CSS の関数で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果はデータ型のオブジェクトであり、これはの特殊型です。

囲いの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にも適用することができます。