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

border-image-outsetプロパティ

 border-image-outsetプロパティは、画像をborderとして利用できるプロパティで、外側への表示範囲を指定します。 borderがデフォルトで表示される位置から外側に拡がります。

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

border-imageを外側に30px表示
border: 20px solid transparent;
border-image: url("img/62469.png") 30 stretch;
border-image-outset: 30px;

関連するプロパティ

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

border-imageborder-imageに関するプロパティを一括定義
border-image-repeat繰り返し
border-image-slice元画像の利用範囲
border-image-source画像ソースのURL
border-image-width幅の指定

構文(Syntax)

CSS

border-image-outset: length | number | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.borderImageOutset;
値の設定
object.style.borderImageOutset="length | number | initial | inherit";

値(Values)

Value摘要
length長さの単位、初期値は0
number設定されたborderの幅(width)の倍数
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

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

Example

 border-image-outsetの例です。

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