border-image - 枠線画像をまとめて指定する

投稿日: / 更新日:

スタイルシートのborder-imageは、枠線画像の各プロパティをまとめて指定するためのプロパティです。使いこなすには、まずは各プロパティの性質を理解する必要があります。

サンプルコード

border-imageを指定したサンプルコードです。border-image-source(枠線画像)、border-image-slice(画像の切り取り範囲)、border-image-slice(繰り返し表示の形式)をまとめて指定しています。枠線画像を表示するには、あらかじめ、borderを指定しておく必要があります。

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

デモ

border-imageプロパティを指定したデモです。CSSを編集して、どのように変化があるのかを確認してみて下さいね。

値の指定

値の指定方法には順番があります。下記の通りに指定して下さい。

  1. border-image-source
  2. border-image-slice / border-image-width / border-image-outset
  3. border-image-repeat

各値は半角スペース( )で区切って下さい。border-image-sliceborder-image-widthborder-image-outsetの間は、スラッシュ(/)で区切ります。画像ファイルのパス以外は省略可能です。border-image-sliceを省略してborder-image-widthborder-image-outsetを指定したり、border-image-sliceborder-image-widthを省略してborder-image-outsetを指定することはできません。下記にいくつかの指定例を載せておきます。

/* 全ての値を指定 */
#element {
	border-image: url( "/border.png" ) 40 / 40px / 20px round ;
}

/* [border-image-source]、[border-image-slice]、[border-image-repeat]だけを指定 */
#element {
	border-image: url( "/border.png" ) 40 round ;
}

/* [border-image-source]、[border-image-slice]だけを指定 */
#element {
	border-image: url( "/border.png" ) 40 ;
}

/* [border-image-slice]を省略して[border-image-width]を指定するとエラー */
#element {
	border-image: url( "/border.png" ) 40px ;
}

/* [border-image-slice]、[border-image-width]を省略して[border-image-outset]を指定するとエラー */
#element {
	border-image: url( "/border.png" ) 40px ;
}

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

項目説明
inherit親要素の値を引き継ぐ。例の場合、div要素のborder-imageには、bodyに指定された値(url( "/border.png" ) 40 round)が引き継がれる。
initialプロパティの初期値が適用される。この場合、画像ファイルが指定されないので枠線画像は表示されない。実質的には意味がない値と言える。
border-image-source枠線画像のパスを指定する。
border-image-width枠線画像の表示領域の幅を指定する。
border-image-outset枠線画像の境界線を外側に広げる。
border-image-repeat枠線画像の繰り返しを調整する。
border-image-slice枠線画像の切り取りを調整する。

ブラウザのサポート

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月