| 属性名 | border-image-repeat |
|---|---|
| 値 | [ stretch | repeat | round | space ]{1,2} |
| 初期値 | stretch |
| 適用可能要素 | border-collapse が collapse と設定されたテーブル以外のすべての要素 |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 11 | 15 | 16 | 15 | 6 |
ボーダーイメージの枠線部の繰り返し方法を指定します。
| 値 | 説明 |
|---|---|
| stretch | 画像を引き延ばして表示します。 |
| repeat | 画像を繰り返して表示します。 |
| round | 画像を繰り返して表示します。画像の個数が整数となるよう画像のサイズが調整されます。 |
| space | 画像を繰り返して表示します。画像の個数が整数となるよう画像と画像の間に空白が表示されます。 |
border-image-repeat に値を2つ指定した場合、横方向の枠線と、縦方向の枠線を指定したとみなされます。1つ指定した場合は両方の枠線を指定したとみなされます。
border-image-repeat: <horizontal> <vertical> border-image-repeat: <horizontal_vertical>
#d1 {
width: 120px;
height: 62px;
border-image-source: url(./image/border-image.png);
border-image-slice: 10;
border-image-width: 10px;
border-image-repeat: round;
border-style: solid;
margin: 10px;
padding: 10px;
box-sizing: border-box;
}
<div id="d1"></div>
stretch, repeat, round, space の差異を下記に示します。space はまだサポートしているブラウザは少ないようです。