border-image-repeat - 枠線画像の繰り返しを調整する

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

スタイルシートのborder-image-repeatは、枠線画像がどのように繰り返し表示されるのかを指定するためのプロパティです。このプロパティを機能させるには、併せてborder-image-sliceプロパティの理解も必要でしょう。

サンプルコード

border-image-repeatを指定したサンプルコードです。枠線を指定するborder、枠線画像を指定するborder-image-source、また、border-image-sliceと併せて利用しましょう。特にborderは、先に指定しておく必要があります。

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

デモ

border-image-repeatプロパティにrepeatを指定して、繰り返し表示を有効にしたデモです。単純な繰り返し表示のため、一部のタイルがはみ出してしまっているのを確認できます。CSSを編集して、どのように変化があるのかを確認してみて下さいね。

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" ) ; border-image-slice: 40 ; border-image-repeat: repeat ; } /* 下記は関係ありません */ body { margin: 8px 2px ; } #content { background: #fff ; min-height: 80px ; } #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 ; } #left { float: left ; width: 50% ; } #right { float: right ; width: 50% ; } #border { width: 120px ; height: auto ; border: 1px solid #000 ; vertical-align: bottom ; } #border-color { width: 120px ; height: 120px ; background: #9ba5a8 ; border: 1px solid #000 ; margin: 0 auto ; }

値の指定

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

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`border-image-repeat`には、`body`に指定された値(`repeat`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`stretch`(引き伸ばして領域を埋める)が適用される。
stretch	初期値。枠線画像は、表示領域(ボーダーイメージエリア)を埋めるように引き伸ばされる。アスペクト比は考慮されない。繰り返し表示にはならない。
repeat	単純に繰り返し表示される。上、右、下、左のエリアは、画像がセンター寄せの形になっているので、端がはみ出してしまうことが多い。
round	繰り返し表示されるが、表示領域の面積に合わせて画像の開始位置が自動調整される。`repeat`をより綺麗にしてくれる版。
space	繰り返し表示がされる。表示領域の面積にタイルが整数で収まらない場合、余ったスペースはタイルが途切れて埋まる。…`repeat`と挙動が同じに思えます。

ブラウザのサポート

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月