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

border-imageプロパティ

 border-imageプロパティは、画像をborderとして利用できるプロパティです。

 border-imageプロパティは以下のプロパティを一括で定義できます。

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

border-imageの定義
border: 20px solid transparent;
border-image: url("img/62469.png") 100 stretch;

関連プロパティ

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

borderborder-width、border-style、border-colorプロパティを一括指定
border-color線の色
border-radius線の角を丸く
border-style線の種類
border-width線の幅

構文(Syntax)

CSS

border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.borderImage;
値の設定
object.style.borderImage=" border-image-source border-image-slice border-image-width border-image-outset border-image-repeat | initial | inherit";

値(Values)

Value摘要
border-image-source画像のURL
border-image-slice画像のスライスする大きさ/割合(%)
border-image-widthborderの幅
border-image-outset元のborder位置からどのくらい離すか
border-image-repeat繰り返し方法
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)none 100% 1 0 stretch
継承(Inherited)no
変化(Animatable)no

Example

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