最終更新日 
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;
当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。