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

border-image-widthプロパティ

 border-image-widthプロパティは、画像をborderとして利用できるプロパティ群の中でborderの幅(width)を指定するプロパティです。borderプロパティで指定した幅を再指定することができます。

 値は1~4つ指定することができ、上下左右の幅を指定することができます。

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

border: 20px solid transparent;
border-image: url("img/62469.png") 30 stretch;
border-image-width: 30px;

構文(Syntax)

CSS

border-image-width: number | % | auto | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.borderImageWidth;
値の設定
object.style.borderImageWidth = "number | % | auto | initial | inherit";

Values

Value摘要
number設定されたborder幅の倍数、初期値は1
length長さの単位
%読み込む画像の大きさが基準
autoborder-image-sliceプロパティの値が基準
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)1
継承(Inherited)no
変化(Animatable)no

Example

 素材Goodの画像を利用させていただきました。