border-image-outset - 境界線を外側に広げる

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

スタイルシートのborder-image-outsetは、ボーダーイメージエリアの境界線を、外側に広げるためのプロパティです。ボーダーイメージエリアの境界線は通常、枠線の端ですが、このプロパティで指定した幅だけ外側に広げることができます。

サンプルコード

border-image-outsetを指定した例です。境界を既定の位置から40pxだけ外側に広げています。

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

デモ

border-image-outsetプロパティに40px 40px 40px 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-outset: 40px 40px 40px 40px ; background: #9ba5a8 ; width: 30% ; margin: 50px auto ; } /* 下記は関係ありません */ body { margin: 8px 2px ; } #content { background: #fff ; min-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-outset: 10px 20px 30px 40px ;
}

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

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

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

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

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`border-image-outset`には、`body`に指定された値(`10px 20px 30px 40px`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`0 0 0 0`となる。
number	枠線の幅に対する倍率で指定する。枠線の幅が40pxの場合、`1`を指定すると40pxが適用される。`2`を指定すれば80pxが適用される。`border-image-outset`の初期値は`0`である。
length	`px`など、CSSで許可されている単位を利用してサイズを指定します。(単位の一覧)

仕組み

border-image-outsetによって、ボーダーイメージエリアがどのように広がり、枠線画像が描画される位置がどのように決まるのか。順を追って確認していきましょう。項目をクリックすると、デモを確認できます。

項目	説明
ボーダーイメージエリア	ボーダーイメージエリアとは枠線画像が描画される領域のことです。ボーダーイメージエリアの境界線は、上枠の上端、右枠の右端、下枠の下端、左枠の左端です。そこから内側に向けて、幅が広がります。例えば、40pxの枠線に対して、ボーダーイメージエリアの幅を30pxとした時、枠線の内側10pxには画像が描画されないことになります。例を見て確認して下さい。ボーダーイメージエリアは、分かりやすいようにそれぞれ、上枠に赤、右枠に青、下枠に緑、左枠に黄色を塗っています。
上の境界線を広げる	さて、それでは`border-image-outset`の値に`10px 20px 30px 40px`を指定した場合を見ていきましょう。1つ目の値は、上枠の境界線を広げます。`10px`なので、10pxだけ、上方向に広がります。
右の境界線を広げる	次に2つ目の値は右枠の境界線を広げます。`20px`を指定したので、右方向に20pxだけ移動しますね。
下の境界線を広げる	続いて3つ目の値は、下枠の境界線を広げます。`30px`を指定したので、下方向に30pxだけ移動しますね。
左の境界線を広げる	最後に、4つ目の値は左枠の境界線を広げます。`40px`を指定したので、左方向に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月