border-image プロパティ
border-image プロパティは、画像を border として利用できるプロパティです。
border-image プロパティは以下のプロパティを一括で定義できます。
表示するためには border を設定しなければなりません。
border: 20px solid transparent;
border-image: url("img/62469.png") 100 stretch;
ページ内 Index
- ad -
構文(Syntax)
CSS
border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat | initial | inherit;
DOM ( JavaScript )
String = object.style.borderImage;
object.style.borderImage=" border-image-source border-image-slice border-image-width border-image-outset border-image-repeat | initial | inherit";
値（Values）
| Value | 摘要 |
|---|---|
| border-image-source | 画像のURL |
| border-image-slice | 画像のスライスする大きさ/割合（%） |
| border-image-width | borderの幅 |
| border-image-outset | 元のborder位置からどのくらい離すか |
| border-image-repeat | 繰り返し方法 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | none 100% 1 0 stretch |
| 継承（Inherited） | no |
| 変化（Animatable） | no |
Example
素材Goodの画像を利用させていただきました。
- ad -
関連プロパティ
以下は関連するプロパティです。
| border | border-width、border-style、border-colorプロパティを一括指定 |
| border-color | 線の色 |
| border-radius | 線の角を丸く |
| border-style | 線の種類 |
| border-width | 線の幅 |