CSS

Cascading Style Sheets border-image property.

border-image

　border-imageプロパティは、画像ボーダーについてまとめて指定する際に使用します。

　border-imageプロパティでは、

border-image-source

画像ボーダーに使用する画像ファイルを指定する。

border-image-slice

ボーダー画像の使用範囲を指定する。

border-image-width

画像ボーダーの太さを指定する。

border-image-outset

ボーダーイメージ領域がボーダーボックスを超えて拡がる量を指定する。

border-image-repeat

画像ボーダーの繰り返し方法を指定する。

の各プロパティの値を、まとめて指定することができます。省略された値はそれらの初期の値に設定されます。

　現在のところ、個別のプロパティをサポートしているブラウザは無いようなので、画像ボーダーを実現する際には、border-imageプロパティを利用するのが一般的です。border-imageプロパティでも、border-image-outsetの値はブラウザでサポートされていないようです。

　画像は上下左右それぞれのボーダー用に４枚必要となるわけではなく、１枚の画像で上下左右の画像ボーダーを実現します。

　画像ボーダーの描画プロセスは以下の順序になります。

1. border-image-sourceでボーダーに使用する画像が指定される。
2. border-image-sliceで画像の端から内側へスライスする距離が指定され、画像が９つのイメージパーツに分割される。
3. border-image-widthで画像ボーダーの太さが指定される（border-widthプロパティで代替可）。
4. border-image-repeatのキーワード stretch・round・repeat・spaceで、画像の繰り返し方法が指定される。
5. 画像タイルの開始位置が決定され、ボーダーイメージエリアに合わせて拡大縮小されてタイル状に敷き詰められる。

値

　各プロパティの値をスペース、または、スラッシュ（/）で区切って指定。

　上記の順番で指定する。

初期値・適用対象・値の継承

初期値

• border-image-sourceはnone
• border-image-sliceは100%
• border-image-widthは1
• border-image-outsetは0
• border-image-repeatはstretch

適用対象

すべての要素（border-collapseプロパティの値に collapse が指定された table内要素を除く）

値の継承

しない

Sample

　ここのサンプルですが、Chrome, Edge, Operaでは意図した表示になりませんでしたが、FireFox, Safariでは意図した表示になりました。可能であれば、FireFox, Safariで閲覧して頂くことを推奨いたします。（2023年2月3日時点）

元画像

　上記の「元画像」を使って、サンプルを表示してみます。画像のサイズは、45x45px。●１個のサイズは、15pxとなっています。

<p class="sample1">画像ボーダーの使用例</p>

.sample1 {
	border-image: url("imgs/border_image01.png") 15 / 15px round;
}

• border-image-sourceは画像の保存場所である imgs/border_image01.png を指定。
• border-image-sliceは●１個の大きさである 15px を表す 15（単位なし）を指定。
• border-image-widthは●１個の幅（大きさ）である 15px を指定。
• border-image-outsetは、ここでは指定していません。
• border-image-repeatは、round を指定。

　上記の指定で、一応、ボーダー画像を表示できました。しかし、見た目がよろしくないので、調整していきます。

　表示する領域を指定するために、widthと heightを指定します。

.sample2 {
	width: 210px;
	height: 80px;
	border-image: url("imgs/border_image01.png") 15 / 15px round;
}

　しかし、ボーダー画像と文字列が重なったままなので、調整したいのですが、border-imageプロパティでは調整できないので、border-styleプロパティと border-widthプロパティを使います。

.sample3 {
	width: 210px;
	height: 80px;
	border-image: url("imgs/border_image01.png") 15 / 15px round;
	border-style: solid;
	border-width: 15px;
}

　以上で、一応、完成となります。

　ちなみに、border-styleプロパティと border-widthプロパティを使ったことにより、万が一、border-imageプロパティにエラー（例えば、画像が何らかの原因により表示できないなど...）が発生した場合にはボーダーが表示されますので、border-styleプロパティで代替えのボーダー設定をしておくと良さそうです。

.sample4 {
	width: 210px;
	height: 80px;
	border-image: url("imgs/border_image00.png") 15 / 15px round;
	border-style: solid;
	border-width: 15px;
}

Browser support