CSSのborder-imageを使ってborderをグラデーションにする方法

今回はCSSのborder-imageを使って、borderをグラデーションにする方法です。

borderをグラデーションにする必要ある？？って思いつつもこの記事を作成するにあたり実験したら、思いの外きれいでした(笑)

結構簡単にできるんで、センスのいい方はサイトのデザインい取り入れて活用してください。

CSSのborder-imageを使ってborderをグラデーションにする方法

今回はdivタグでブロック要素を用意し、その要素をぐるっと囲うようにborderを描画し、そのborderをグラデーションにしました。

作成したHTMLとCSSは以下の通りです。

HTML

<div id="area1" class="area">
	<div class="inner">エリア1</div>
</div>

CSS

.area {
	margin: 2%;
	width: 30%;
}
.area .inner {
	padding: 2%;
}
#area1 {
	border: 2px solid;
	border-image: linear-gradient(90deg, #0000FF, #FF0000);
	border-image-slice: 1;
}

コードの解説

CSSの1-7行目はボーダーを設定するブロック要素を用意しているだけです。

 

CSS 9行目 border: 2px solid;

まずブロック要素に border を指定します。

2pxは太さで solid は実線になります。

 

border-image: linear-gradient(90deg, #0000FF, #FF0000);

border-imageプロパティはborderに画像を指定するものですが、上記のように linear-gradient() を使うとグラデーションを表示できます。

linear-gradient() でグラデーションの設定をする方法は次の記事を参考にしてください。

≫ CSSでグラデーションを作成する方法

 

border-image-slice プロパティは、、、ぶっちゃけあまり使い方分かってないです！すみません！

 

これでブラウザに出力するとグラデーションの出来上がりです。

簡単ですね。

上のコードを出力したサンプル画面は次のリンクです。

[btn class=”simple”]border-imageを使ってborderをグラデーションにするサンプル[/btn]

グラデーションを縦方向にする方法

上のサンプルでは左から右へ横方向にグラデーションになるサンプルでした。

この方法だと簡単に縦方向のグラデーションもできます。

#area1 {
	border: 2px solid;
	border-image: linear-gradient(180deg, #0000FF, #FF0000);
	border-image-slice: 1;
}

実際にグラデーションを描画する部分の角度を変えればOKです。

border-image: linear-gradient(180deg, #0000FF, #FF0000);

180degの部分です。

この部分はグラデーションの方向の角度を指定します。

180degにすると上から下になります。

 

150degとかを指定すれば斜めにもなります。

色々試してみてください。

まとめ

CSSのborder-imageを使ってborderをグラデーションにする方法を紹介しました。

サンプル画面はみましたか？

意外と綺麗なもんですね！

分かりやすいように青と赤でしたけど、別の色も指定できますし色を3食にしたりもできます。

是非試してみてください。