最終更新日

border-imageプロパティ

border-imageは、ボーダー画像関連プロパティの値をまとめて指定するプロパティです。各プロパティの値を半角スペースで区切って記述しますが、border-image-widthプロパティの値は「/」で区切ります。値の指定を省略した場合は、それぞれの初期値に設定されます。

なお、ボーダー画像関連の値をそれぞれ個別に指定する場合は、下記プロパティを使用します。

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

CSS3での変更点
・border-imageは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
各プロパティの初期値 各プロパティの適用先 なし
説明
border-image-sourceの値 ボーダーに使用する画像を指定します。
border-image-sliceの値 画像を9つにスライスします。
border-image-widthの値 ボーダー画像の太さを指定します。
border-image-outsetの値 ボーダー画像の外側への拡張を指定します。
border-image-repeatの値 画像の繰り返し方法を指定します。
サンプルコード
border-image: url("border.png") 10 10 / 30px round stretch;
参考文献:CSS Backgrounds and Borders Module Level 3外部リンク
HOME