border-imageでborderにグラデーションをかける。

今までborderのグラデーションをかける時はbackground-imageに疑似要素を使い作っていましたが、border-imageを使ってみたら、簡単に実装することができました。

border-imageを使ったグラデーション

border-bottomのみ

<h1 class="gradation">サンプル！</h1>

.gradation {
	border-image: linear-gradient(to right, #4242ff 0%, #ff2d96 100%) 1/0 0 5px 0;
	border-style: solid;
}

今まで同じことをするのに疑似要素を駆使してきましたが、これからはこちらを使ったほうが良さそう！
ショートハンドで書いたら2行で済みます。
見出しでよく使うデザインなので、簡単になるのは本当にうれしいです。

border全体

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

div {
  border-style: solid;
  border-image: linear-gradient(120deg, #e40067 0%, #f9e900 100%)1/ 10px 5px 3px 10px;
  padding: 1em;
}

わかりやすいように一部分、ボーダーラインを太くしてみました。角度や太さを変えることも順番を覚えたら難しくありません。簡単に書けます。

今回、使ったCSSはborder-styleとborder-imageの2つ。

border-styleはボーダーラインの種類を指定するプロパティ。border-imageは5つのプロパティを一括して指定しているプロパティです。

border-imageが指定できる5つのプロパテｨ

border-image-source（ボーダー画像を指定。グラデーションも含む）
border-image-slice（ボーダー画像の分割する位置を指定）
border-image-width（上下左右、それぞれのボーダー画像の幅を指定）
border-image-outset(ボーダー画像が境界より外にはみ出す幅を指定)
border-image-repeat（ボーダー画像の繰り返しを指定）

borderにグラデーションをかけるのに必要な プロパティは、

border-image-source、border-image-slice、border-image-width

の3種類。

border-image-sourceはlinear-gradientを使って、グラデーションの角度や色の変更。
border-image-widthは線の幅の変更。
border-image-sliceはグラデーションの時は 1 で大丈夫。
そして、border-styleでラインの種類を指定すると、グラデーションのかかったborderの出来上がりです。

border-radiusとは一緒に使うことができないのは残念ですが、主要なブラウザにはほぼ対応しています。