ボーダー画像の幅を指定する
border-image-width
{
border-image-width
border-image-widthプロパティは、ボーダー画像の幅を指定します。通常、border-widthプロパティの幅に従うボーダー画像の幅をこのプロパティで上書きできます。
初期値 | 100% |
---|---|
継承 | なし |
適用される要素 | すべての要素(border-collapseプロパティの値にcollapseが指定されたtable内要素を除く) |
モジュール | Backgrounds and Borders Module Level 3 |
値の指定方法
幅
値は半角スペースで区切って4つまで指定でき、上辺、右辺、下辺、左辺の幅の順に適用されます。いずれかの値を省略した場合は以下のような指定になります。
- 値が1つ すべての辺に同じ値が適用されます。
- 値が2つ 1つ目が上下辺、2つ目が左右辺に適用されます。
- 値が3つ 1つ目が上辺、2つ目が左右辺、3つ目が下辺に適用されます。
auto | border-image-sliceプロパティの値と同じになります。指定がない場合は、border-widthプロパティの値と同じになります。 | 任意の数値+単位 | 各辺の幅を単位付きの数値で指定します。 | 数値 | border-widthプロパティの値を基準とした倍数を指定します。 | %値 | 各辺の幅を%値で指定します。値は画像の幅と高さに対する割合となります。 |
---|
サンプルコード
.box{ width: 400px; height: 100px; border: 20px solid gray; border-image-source: url(image/frame.png); border-image-width: 30px; }