border-image-width
border-image-widthはボーダー画像が描画する領域のサイズを指定するためのプロパティです。
ボーダー画像はborder-box領域の内側にborder-image-widthに指定されたサイズだけ描画されます。
.target{
width:27px;
height:27px;
border: 27px solid orange;
border-image-source:url("/sample/images/border.png");
border-image-slice :27;
border-image-width : 1;
border-image-outset : 0;
border-image-repeat : round;
}
数値nが指定された場合は、border-widthで指定されたボーダー幅のn倍をボーダー幅として採用します。またパーセンテージでの指定も可能です。
ボーダー幅を辺毎に指定する場合は以下のように指定します。
幅指定がひとつの場合は全辺で指定されたボーダー幅を利用します。
border-image-width : 1;
幅指定が2つの場合は最初に指定された値で上下のボーダー幅を、2番目に指定された値で左右のボーダー幅が指定できます。
border-image-width : 2 1;
幅指定が3つの場合は最初に指定された値で上辺のボーダー幅を、2番目に指定された値で左右のボーダー幅を、3番目に指定された値で下辺のボーダー幅を指定できます。
border-image-width : 2 1.5 1;
幅指定が4つの場合は最初に指定された値で上辺のボーダー幅を、2番目に指定された値で右辺のボーダー幅を、3番目に指定された値で下辺のボーダー幅を、4番目に指定された値で左辺のボーダー幅できます。
border-image-width : 1 2 1.5 1
値が省略された場合は、border-image-sliceで指定されたサイズ、更に値が省略されている場合はborder-widthで指定したボーダーの幅をボーダー画像領域として認識します。
また、border-image-outsetを利用して描画領域をborder-box領域の外側に広げることもできます。
対応ブラウザ
IE | Chrome | Safari | Firefox | iOS | Android |
---|---|---|---|---|---|
◯ 11〜 | ◯ 15〜 | △ 5.1〜 ◯ 7〜 |
◯ 15〜 | △ 3.2〜 ◯ 6〜 |
△ 2.1〜 ◯ 4.4〜 |
◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
参考URL
6.3. Drawing Areas: the ‘border-image-width’ property - CSS3 - W3C
登録日 : 2014年07月14日 最終更新日 : 2014年7月14日
同じカテゴリー(Border)のエントリー
- border
- border-left
- border-bottom
- border-right
- border-top
- border-image
- border-image-repeat
- border-image-outset
- border-image-width
- border-image-slice
- border-image-source
- border-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border-top-right-radius
- border-top-left-radius
- border-left-width
- border-bottom-width
- border-right-width
- border-top-width
- border-width
- border-left-style
- border-bottom-style
- border-right-style
- border-top-style
- border-style
- border-left-color
- border-bottom-color
- border-right-color
- border-top-color
- border-color