Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

border-image

概要

CSS の border-image プロパティを使って、要素のボーダーに画像を描くことができます。複雑な見た目のウィジェットを以前より簡単に描くことができるようになり、場合によっては 9 つの箱を準備する必要もなくなりました。

border-image は、border-style プロパティで与えられたボーダーのスタイルの代わりに使われます。注意点として、もし border-image-source やその簡略化プロパティ border-image でセットされた border-image-source の計算値が none である場合や、画像を表示できない場合には、ボーダーのスタイルが使われるでしょう。

これは、次の細分化されたプロパティの設定をまとめて行うための、簡略化プロパティです: border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat

初期値以下の各プロパティのショートハンドとして補完します:
適用対象以下の各プロパティのショートハンドとして補完します:
. It also applies to ::first-letter.
継承不可
相対値の基準以下の各プロパティのショートハンドとして補完します:
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

各プロパティのページをご覧ください。

画像の繰り返し (repeat)

画像は切り分けられ、ボーダー領域を埋めるようにタイル状に並べられます。

.example { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

結果:
border image repeat demo

画像の繰り返し(round)

round 指定すると、終端がうまくつながるようにタイルが配置されます。

.example { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

結果:
border image round demo

画像の引き伸ばし

stretch 指定すると、ボーダー領域を埋めるように画像を引き伸ばします。

.example { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

結果:
border image stretch demo

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
The definition of 'border-image' in that specification.
勧告候補  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート

3.5 (1.9.1)-moz [1]

Without prefix since 15 (15)

7.0-webkit 未サポート 10.5 / 11.0-o 3.0-webkit [2]
オプションの <border-image-slice> 15 (15) ? 未サポート ? ?
fill キーワード 15 (15) Yes 未サポート 未サポート Yes (6)
機能 iOS Safari Opera Mini Opera Mobile Android Browser
基本サポート

3.2-webkit

Without prefix since 15.0 (15)

未サポート 11.0-o 2.1-webkit
オプションの<border-image-slice> 15.0 (15) 未サポート ? ?
fill キーワード 15.0 (15) 未サポート 未サポート Yes(18)
  • [1] Gecko のバージョン 15 以前では、仕様書の以前のバージョンがベンダープレフィックス版として実装されていました
  • [2] Opera では、プレフィックス付きプロパティが、プレフィックス無しのプロパティの後で追加されました

ドキュメントのタグと貢献者

 このページの貢献者: teoli, Sebastianz, ethertank, sosleepy
 最終更新者: teoli,