ボーダー画像の繰り返し方法を指定します：
#borderimg
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
Try it Yourself ❯
border-image-repeat プロパティは、画像ボーダーを繰り返したり、丸めたり、伸ばしたりするかどうかを指定します。 （訳注：roundedを丸めるとしたが、整数回の繰り返しでちょうど埋まらない場合、ちょうど埋まるようにサイズを調整することです。
チップ: border-image プロパティ (全ての the border-image-* プロパティを設定するためのショートハンド・プロパティ) もご覧ください。
| デフォルト値： | stretch |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.borderImageRepeat="round" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
border-image-repeat: stretch|repeat|round|initial|inherit;
注: This property specifies how the images for the sides and the middle part of the border image are scaled and tiled. So, you can specify two values here. If the second value is omitted, it is assumed to be the same as the first.
| 値 | 説明 | Play it |
|---|---|---|
| stretch | デフォルト値。領域を埋めるように画像を引き伸ばします | Play it ❯ |
| repeat | 領域を埋めるように画像をタイル状に繰返します | Play it ❯ |
| round | 領域を埋めるように画像をタイル状に繰返します。タイルが整数で並ばない場合には、画像が収まるように拡大縮小されます | Play it ❯ |
| space | 領域を埋めるように画像をタイル状に繰返します。タイルが整数で並ばない場合には、 余分なスペースをタイルの周りに配分します | |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
CSS3 チュートリアル：CSS3 Border Images
CSSリファレンス：border-image プロパティ
CSSリファレンス：border-image-outset プロパティ
CSSリファレンス：border-image-slice プロパティ
CSSリファレンス：border-image-source プロパティ
CSSリファレンス：border-image-width プロパティ
HTML DOM リファレンス：borderImageRepeat プロパティ