border-image-source プロパティ

　border-image-source プロパティは、画像を border として利用できる CSS プロパティのひとつで画像の URL を指定するプロパティです。
　border-image-slice プロパティと併用します。border-image-slice プロパティは画像の表示領域で利用しない部分を指定します。

　表示するためには border を設定しなければなりません。

border-imageの元画像のURLを指定（Exampleを参照）

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 があります。

- ad -

構文(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の画像を利用させていただきました。