ボーダー画像の幅を指定します：
#borderimg
{
border-image-source: url(border.png);
border-image-width: 10px;
}
Try it Yourself ❯
border-image-width プロパティは、ボーダー画像の幅を指定します。
チップ: border-image プロパティ (全ての the border-image-* プロパティを設定するためのショートハンド・プロパティ) もご覧ください。
| デフォルト値： | 1 |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.borderImageWidth="20px" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| border-image-width | 15.0 | 11.0 | 13.0 | 6.0 | 15.0 |
border-image-width: number|%|auto|initial|inherit;
注: border-image-width には、1 ～ 4 個の値（上、右、下、左）を指定することができます。 それぞれの値は、ボーダーイメージエリアの上・右・下・左の端から内側への距離です。 4 番目の値を省略した場合には、2 番目の値と同じになります。 また、3 番目の値も省略した場合には、1 番目の値と同じになります。更に、2 番目の値も省略した場合には、1 番目の値と同じになります。
| 値 | 説明 | Play it |
|---|---|---|
| length | border-width のサイズを指定する長さ (px) です | Play it ❯ |
| number | デフォルト値は 1 です。border-width の倍数を表します | Play it ❯ |
| % | ボーダー画像領域のサイズ（水平オフセットの領域の幅と垂直オフセットの高さ）を参照します | Play it ❯ |
| auto | 指定した場合、幅は、対応する画像スライスの固有な幅または高さになります | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
CSS3 チュートリアル：CSS3 Border Images
CSSリファレンス：border-image プロパティ
CSSリファレンス：border-image-outset プロパティ
CSSリファレンス：border-image-repeat プロパティ
CSSリファレンス：border-image-slice プロパティ
CSSリファレンス：border-image-source プロパティ
HTML DOM リファレンス：borderImageWidth プロパティ