| 属性名 | border-image-outset |
|---|---|
| 値 | [ <length> | <number> ]{1,4} |
| 初期値 | 0 |
| 適用可能要素 | border-collapse が collapse と設定されたテーブル以外のすべての要素 |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 (Chrome や Opera では可能) |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 11 | 15 | 16 | 15 | 6 |
ボーダーイメージを、ボーダーボックスを超えて広げる量を指定します。
| 値 | 説明 |
|---|---|
| <length> | 広げる量を、長さで指定します。 |
| <number> | 広げる量を、border-width に対する割合 (例:1.5) で指定します。 |
border-image-outset に値を4つ指定した場合、top, right, bottom, left を指定したとみなされます。left を省略すると right と同じ値になります。bottom を省略すると top と同じ値になります。right を省略すると top と同じ値になります。
border-image-outset: <top> <right> <bottom> <left> border-image-outset: <top> <right_left> <bottom> border-image-outset: <top_bottom> <right_left> border-image-outset: <top__right_bottom_left>
詳細は border-image を参照してください。
#d1 {
width: 120px;
height: 60px;
border: 10px solid transparent;
border-image-source: url(./image/border.png);
border-image-slice: 10;
border-image-width: 10px;
border-image-repeat: round;
border-style: solid;
}
#d2 {
width: 120px;
height: 60px;
border: 10px solid transparent;
border-image-source: url(./image/border.png);
border-image-slice: 10;
border-image-width: 10px;
border-image-repeat: round;
border-image-outset: 1;
border-style: solid;
}
<div id="d1"></div> <div id="d2"></div>