最終更新日：
公開日：
リファレンス
CSS
ボーダー イメージ
border-imageプロパティ
ボーダー画像に関する指定を一括で行うプロパティです。
-
初期値
各プロパティの初期値
-
継承
不可
-
適用できる要素
全要素
値
このプロパティでは、次のプロパティへの設定を一括で指定することができます。値の設定方法は各プロパティに準拠します。
border-image-sliceプロパティ、border-image-widthプロパティ、border-image-outsetプロパティを指定する場合は「/（半角スラッシュ）」で区切って指定します。
パターン1
次の例では、全てのプロパティに関する設定を指定しています。
CSSコード例
border: 20px dashed gray;
border-image: url(https://gray-code.com/wp-content/uploads/2016/07/border-dot-sample.png) 20% / 20px / 10px repeat;表示例：
パターン2
次の例では、border-image-sourceプロパティ、border-image-sliceプロパティ、border-image-repeatプロパティについて値を指定しています。
CSSコード例
border: 20px dashed gray;
border-image: url(https://gray-code.com/wp-content/uploads/2016/07/border-dot-sample.png) 20% repeat;表示例：
パターン3
次の例では、border-image-widthプロパティ以外の指定を行っています。
border-image-sliceプロパティに関しては値を2つ指定し、「/」で区切ってborder-image-outsetプロパティを指定しています。
CSSコード例
border: 20px dashed gray;
border-image: url(https://gray-code.com/wp-content/uploads/2016/07/border-dot-sample.png) 20% 10% / / 10px repeat;表示例：