border-image-width - 枠線画像の幅を指定する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのborder-image-widthは、ボーダーイメージエリアの幅を指定するためのプロパティです。ボーダーイメージエリアとは、画像が描かれる領域のことです。

サンプルコード

border-image-widthを指定した例です。このプロパティの指定を有効にするには、あらかじめ枠線と、枠線画像を用意して下さい。

div {
	border: 40px solid #333 ;
	border-image-source: url( "/border.png" ) ;
	border-image-width: 10px 20px 30px 40px ;
}

デモ

border-image-widthプロパティに10px 20px 30px 40pxを指定して、枠線画像の幅を指定した例です。このデモを見ただけでは、わけが分からないと思うので「仕様」の章の説明を読みながら、確認して下さいね。

RUN
HTML
CSS
JavaScript

<div id="element"> <div id="content"></div> </div> <div id="infomation"> <div id="left"> <p><img src="/border.png" width="120" height="120" id="border"></p> <p>枠線画像<BR>border.png<BR>(120x120 px)</p> </div> <div id="right"> <p><div id="border-color"></div></p> <p>ボーダー<BR>(40px)</p> </div> </div>

#element { border: 40px solid #9ba5a8 ; border-image-source: url( "/border.png" ) ; border-image-width: 10px 20px 30px 40px ; background: #9ba5a8 ; } /* 下記は関係ありません */ body { margin: 8px 2px ; } #content { background: #fff ; height: 40px ; } #infomation { border-top: 1px solid #000 ; margin: 20px 0 0 ; padding: 20px 0 0 ; overflow: hidden ; } #infomation p { margin: 0 ; padding: 0 ; font-size: .8rem ; text-align: center ; } #left { float: left ; width: 50% ; } #right { float: right ; width: 50% ; } #border { width: 120px ; height: auto ; border: 1px solid #000 ; vertical-align: bottom ; } #border-color { width: 120px ; height: 120px ; background: #9ba5a8 ; border: 1px solid #000 ; margin: 0 auto ; }

値の指定

基本的に、値には「上枠の水平」「右枠の垂直」「下枠の水平」「左枠の垂直」の順に、スペースで区切って4つの値を指定します。例えば、10px 20px 30px 40pxと指定すれば、上枠の水平に10px、右枠の垂直に20px、下枠の水平に30p、左枠の垂直に40pxが適用されます。上から時計回りになることを覚えておきましょう。

応用として、3つの値を指定すると、1つ目の値が「上」、2つ目の値が「右」と「左」、3つ目の値が「下」に適用されます。2つの値を指定すると1つ目の値が「上」と「下」、2つ目の値が「右」と「左」と、十字の形のように適用されます。また、1つの値を指定すると、それが全てに適用されます。

/* 基本は4つの値を指定する */
/* [1]上 → [2]右 → [3]下 → [4]左 */
#element {
	border-image-width: 10px 20px 30px 40px ;
}

/* 3つの値を指定すると「上」「左右」「下」に適用される */
/* [1]上 → [2]左右 → [3]下 */
#element {
	border-image-width: 10px 20px 30px ;
}

/* 2つの値を指定すると「上下」「左右」に適用される */
/* [1]上下 → [2]左右 */
#element {
	border-image-width: 10px 20px ;
}

/* 1つの値を指定すると「上下左右」に適用される */
/* [1]上下左右 */
#element {
	border-image-width: 10px ;
}

個々の値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`border-image-width`には、`body`に指定された値(`10px 20px 30px 40px`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`1 1 1 1`となる。
auto	`border-image-slice`と同じ値が設定される。`border-image-slice`の初期値は、画像のオリジナルサイズの幅と同じ。ややこしいが、`border-image-width`に`auto`を指定することで、`border-image-slice`に`initial`を指定したのと同じ効果となるようだ。
number	枠線の幅に対する倍率で指定する。枠線の幅が40pxの場合、`1`を指定すると、枠線画像の幅も40pxとなる。`2`を指定すれば枠線画像の幅は80pxとなる。`border-image-source`の初期値は`1`である。
percentage	要素の横幅、高さに対するパーセンテージで指定する。例えば、要素の横幅が300pxの場合、`50%`を指定すると150pxになる。水平方向の幅を指定する場合は要素の高さ、垂直方向の幅を指定する場合は要素の横幅がパーセンテージの対象となる。例を見てみましょう。`33.33%`を指定しているので、水平方向にも、垂直方向にも、枠線画像の幅は要素の横幅、高さに対して1/3になっているはずです。
length	`px`など、CSSで許可されている単位を利用してサイズを指定します。(単位の一覧)

仕組み

さて、ボーダーイメージエリアの幅はどのように決定されるのでしょうか？その前にボーダーイメージエリアとは一体なんなのでしょうか？「上枠の水平」とか「右枠の垂直」だとか、言葉だけで聞いてもわけが分からないと思うので、可視化したものを見ながら、仕組みを理解していきましょう。

項目	説明
上枠の水平	`border-image-width`に指定する4つの値のうち、1つ目は「上枠の水平」です。上枠のボーダーイメージエリアは、上端から下方向にかけて幅が広がります。例では`10px`を指定しています。枠線の幅40pxに対して10pxなので、上枠の1/4を占めることになりますね。
右枠の垂直	次に、2つ目に指定した値は「右枠の垂直」に適用されます。右枠の場合は、右端から左方向にかけて、ボーダーイメージエリアの幅が広がります。例では20pxに指定してみました。
下枠の水平	次に、3つ目に指定した値は「下枠の水平」に適用されます。下枠の場合は、下端から上方向にボーダーイメージエリアの幅が広がります。例では30pxに指定してみました。
左枠の垂直	ここまで来ると、「そういうことか」と理解した人もいるんじゃないかと思います。最後に、4つ目の値は「左枠の垂直」でしたね。左枠の場合は、左端から右方向にボーダーイメージエリアの幅が広がります。例では40pxに指定してみました。
枠線画像を重ねる	これまで見てきたボーダーイメージエリア(`10px 20px 30px 40px`)に枠線画像をはめてみましょう。…どうでしょう？このようにして、表示される枠線画像の範囲が決まります。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。

Chrome
●
15+
2011年10月
Firefox
●
15+
2012年8月
Safari
●
6+
2012年7月
Ie
●
11+
2013年10月
Edge
●
12+
2015年3月
Opera
●
15+
2013年7月
Safari(iOS)
●
6+
時期不明
Ie Mobile
●
11+
2014年7月
Chrome
●
47+
2015年12月
Android
●
4.4+
2014年6月
FF Mobile
●
44+
2016年1月
Opera Mobile
●
33+
2015年10月