border-image-source プロパティ
border-image-source プロパティは、画像を border として利用できる CSS プロパティのひとつで画像の URL を指定するプロパティです。
border-image-slice プロパティと併用します。border-image-slice プロパティは画像の表示領域で利用しない部分を指定します。
表示するためには border を設定しなければなりません。
border: 30px solid transparent;
border-image-source: url("img/62469.png");
border-image-slice: 25%;
border-image-repeat: repeat;
詳しくは Example を参照してください
border-image-source: none;にすると画像は表示されません。
関連するプロパティにはborder-image、border-image-repeat、border-image-slice 、border-image-outset 、border-image-width があります。
ページ内 Index
構文(Syntax)
CSS
border-image-source: none | url | initial | inherit ;
DOM ( JavaScript )
String = object.style.borderImageSource;
object.style.borderImageSource = "none | url | initial | inherit";
値（Values）
| Value | 摘要 |
|---|---|
| none | 初期値 |
| url | 画像をurlで設定 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | none |
| 継承（Inherited） | no |
| 変化（Animatable） | no |
Example
素材Goodの画像を利用させていただきました。
関連するプロパティ
以下は関連するプロパティです。
| border-image | border-imageに関するプロパティを一括定義 |
| border-image-outset | 外側への表示範囲 |
| border-image-repeat | 繰り返し |
| border-image-slice | 元画像の利用範囲 |
| border-image-source | 画像ソースのURL |
| border-image-width | 幅の指定 |