備忘録的プログラミングリファレンス

border-image-sourceプロパティ

 border-image-sourceプロパティは、画像をborderとして利用できるプロパティのひとつで画像の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;

 border-image-source: none;にすると画像は表示されません。

関連するプロパティ

 以下は関連するプロパティです。

border-imageborder-imageに関するプロパティを一括定義
border-image-outset外側への表示範囲
border-image-repeat繰り返し
border-image-slice元画像の利用範囲
border-image-width幅の指定

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