border-image-source - 枠線画像のパスを指定する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのborder-image-sourceは、枠線にしたい画像ファイルのパスを指定するためのプロパティです。

サンプルコード

border-image-sourceを指定した例です。このプロパティの指定を有効にするには、あらかじめ枠線を用意して下さい。

div {
	border: 20px solid #333 ;
	border-image-source: url( "/border.png" ) ;
}

デモ

border-image-sourceプロパティを利用して、枠線の画像にborder.pngを指定した例です。四隅に1枚ずつ画像が表示されているだけで「おやっ」と思うかもしれませんが、これで大丈夫です。枠線に画像を適用する仕組みは、なかなか複雑です。ここでは「枠線に画像を指定しただけだとこうなる」ということを覚えておきましょう。

RUN
HTML
CSS
JavaScript

<div id="element"> <div id="content"></div> </div> <div id="infomation"> <div id="left"> <p><img src="/border.png" width="120" height="120" id="border"></p> <p>枠線画像<BR>border.png<BR>(120x120 px)</p> </div> <div id="right"> <p><div id="border-color"></div></p> <p>ボーダー<BR>(40px)</p> </div> </div>

#element { border: 40px solid #9ba5a8 ; border-image-source: url( "/border.png" ) ; background: #9ba5a8 ; } body { margin: 8px 2px ; } #content { background: #fff ; min-height: 120px ; } #infomation { border-top: 1px solid #000 ; margin: 20px 0 0 ; padding: 20px 0 0 ; overflow: hidden ; } #infomation p { margin: 0 ; padding: 0 ; font-size: .8rem ; text-align: center ; } img { vertical-align: bottom ; } #left { float: left ; width: 50% ; } #right { float: right ; width: 50% ; } #border { width: 120px ; height: auto ; border: 1px solid #000 ; } #border-color { width: 120px ; height: 120px ; background: #9ba5a8 ; border: 1px solid #000 ; margin: 0 auto ; }

値の指定

値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`border-image-source`には、`body`に指定された値(`url( "/border.png" )`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`none`(画像なし)となる。
none	初期値。画像なし。
image	`url( "/border.png" )`という形で、画像ファイルのパスを指定する。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。

Chrome
●
15+
2011年10月
Firefox
●
15+
2012年8月
Safari
●
6+
2012年7月
Ie
●
11+
2013年10月
Edge
●
12+
2015年3月
Opera
●
15+
2013年7月
Safari(iOS)
●
6+
時期不明
Ie Mobile
●
11+
2014年7月
Chrome
●
47+
2015年12月
Android
●
4.4+
2014年6月
FF Mobile
●
44+
2016年1月
Opera Mobile
●
33+
2015年10月