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

投稿日: / 更新日:

スタイルシートの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を指定して、ボーダーイメージエリアの境界を外側に広げた例です。枠線画像が、枠線の外側に飛び出しているのを確認して下さいね。どのように飛び出したのかは、「仕組み」の章をご参考下さい。

値の指定

基本的に、値には「上枠」「右枠」「下枠」「左枠」の順に、スペースで区切って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である。
lengthpxなど、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月