borderに画像を指定する

borderに画像やグラデーションを指定できるborder-imageを使ってみます。

対応ブラウザ

border-imageの対応ブラウザはこちら
IE11から対応していますが、border-styleを上書きするバグやborder-image-repeat: spaceをサポートしていないブラウザなどがあるので注意が必要です。
　

サンプルコード

border-imageは1枚の画像を9分割して、4つの角と辺に使用されます。
今回は以下のようなサイズの画像を用意しました。

実際の画像はこちらです。

HTML

<div class="sample"></div>

CSS

.sample {
	width: 160px;
	height: 110px;
	border-width: 32px;
	border-style: solid;

	border-image-source: url(border.png);
	border-image-slice: 22 32;
	border-image-width: 22px 32px;
	border-image-outset: 0;
	border-image-repeat: repeat;
}

border-imageのデモページ

border-image-source	ボーダーに使用する画像やグラデーションを指定。
border-image-slice	border-image-sourceの切り分ける位置を指定。 値は数値またはパーセント値で指定。 4つの値を指定した場合はtop,right,bottom,leftに、3つの場合はtop,leftとright,bottomに、2つの場合はtopとbottom,leftとrightに、1つの場合は4つに同じ値が設定される。 中央部分はfillを指定した場合のみ使用される。
border-image-width	border-imageの幅を指定。
border-image-outset	border-imageの領域を外側に広げる際に指定。
border-image-repeat	border-imageの4辺の繰り返し方法を指定。 stretch: 領域のサイズに合わせて画像を引き延ばす。 repeat: 領域のサイズ内で画像を繰り返す。 round: 領域のサイズ内で画像を繰り返す。整数回の繰り返しでちょうど埋まらない場合は、ちょうど埋まるようにサイズを調整。

border-imageプロパティでまとめて指定することもできます。

CSS

.sample {
	width: 160px;
	height: 110px;
	border-width: 32px;
	border-style: solid;

	border-image: url(border.png) 22 32 / 22px 32px repeat;
}

「border-image-sourceの値 border-image-sliceの値 / border-image-widthの値 / border-image-outsetの値 border-image-repeatの値」の順番で指定します。
border-imageのデモページ2
　

【参考サイト】

• border-image-source – CSS | MDN
• border-image-slice – CSS | MDN
• border-image-width – CSS | MDN
• border-image-outset – CSS | MDN
• border-image-repeat – CSS | MDN
• border-image – CSS | MDN