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

border-image-width プロパティ

　border-image-width プロパティは、画像を border として利用できるプロパティ border-image において、幅（ width ）を指定するプロパティです。border プロパティで指定した幅を再指定することができます。

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

border-imageの幅を指定
border: 20px solid transparent;
border-image: url("img/62469.png") 30 stretch;
border-image-width: 30px;
詳しくは Example を参照してください

　関連するプロパティにはborder-image、border-image-repeat、border-image-slice 、border-image-source 、border-image-outset があります。

ページ内 Index

- ad -

border-image-width プロパティの指定方法

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

指定数と設定
値を1つ上下左右で同じ値
値を2つ上下、左右
値を3つ上、左右、下の設定
値を4つ上、右、下、左の設定
表示領域内に上に１文字分、左右に1.5文字、下に2文字の太さを指定
border-image-width: 1em 1.5em 2em;

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

- ad -

関連する CSS プロパティ

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

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

関連（Related）