CSS3：border-image-repeatプロパティ

名前	`border-image-repeat`
値	[stretch \| repeat \| round \| space]{1,2}
初期値	stretch
適用対象	すべての要素 ─ ただし、［border-collapse が collapse にされた table における、内部 table 要素］を除く。
継承	されない
百分率	受容しない
算出値	各軸に対応する 2 個のキーワードからなる
アニメーション型	離散的

このプロパティは、9 片に分割されたボーダー画像を、ボーダー画像区画の対応する部位にどの様に拡縮して敷き詰めるかを指定する。

1 個目のキーワードは、［上辺、真中、下辺］部位に対する［横方向の拡縮法／敷き詰め法］に適用され、2 個目のキーワードは、［左辺、真中、右辺］部位に対する［縦方向の拡縮法／敷き詰め法］に適用される。ボーダー画像の描画法を見よ。

2 個目のキーワードが無い場合、1 個目と同じと見なされる。

ファイル名：
BorderImage9.png

横20px×3列、縦20px×3行。透過

stretch

画像片は対応する部位を埋める様に伸張される。

開始<DIV style="width:100px; height:70px;
 border:30px solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-slice:20;
 border-image-repeat:stretch;
">テスト</DIV>終了

repeat

画像片は対応する部位を埋める様に敷き詰められる（繰り返される）。

開始<DIV style="width:100px; height:70px;
 border:30px solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-slice:20;
 border-image-repeat:repeat;
">テスト</DIV>終了

round

画像片は対応する部位を埋める様に敷き詰められる（繰り返される）。整数枚のタイルで埋め尽くせないときは、埋め尽くせる様に画像片は拡縮し直される。

開始<DIV style="width:100px; height:70px;
 border:30px solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-slice:20;
 border-image-repeat:round;
">テスト</DIV>終了

space

画像片は対応する部位を埋める様に敷き詰められる（繰り返される）。整数枚のタイルで埋め尽くせないときは、余った空間がタイルの周囲に配分される。

開始<DIV style="width:100px; height:70px;
 border:30px solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-slice:20;
 border-image-repeat:space;
">テスト</DIV>終了

¶ まず、普通の border をカラー無しで指定する。その後、border-image-source で画像を指定する。

スクリプト：

スクリプト：