最終更新日 2021年4月7日

border-image-widthプロパティ

border-image-widthは、ボーダー画像の太さを指定するプロパティです。

画像の罫線は、「border画像領域」と呼ばれる領域の内部に描かれます。この領域は、初期値ではborderボックスと一致しますが、border-image-outsetプロパティによって境界線を外側へ拡張することも可能です。

border-image-widthでは、「border画像領域」のどの位置まで描くかによって決められる画像による罫線の太さを、1～4個の値で指定します。

4つの値はそれぞれ、領域の上端、右端、下端、左端の距離を、長さのサイズ値、パーセント値または数値、もしくはキーワード「auto」で指定します。それぞれの値は半角スペースで区切ります。

・値を3個のみ指定した場合、4個目は2個目と同じ値を示す
・値を2個のみ指定した場合、3個目は1個目と同じ値を示す
・値を1個のみ指定した場合は、4個の値はすべて同じ値を示す

ボーダー画像関連プロパティの値をまとめて指定するには、border-imageを使用します。

CSS3での変更点

・border-image-widthは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
1	すべての要素	なし

値	説明
パーセント値	「border画像領域」の幅または高さに対する割合で「border画像領域」の境界線からの距離を指定します。
数値	対応するborder-widthの値に対しての倍数で「border画像領域」の境界線からの距離を指定します。
auto	border-image-sliceと同じ値になります。値が存在しない場合は、border-widthの値が使用されます。

サンプルコード

border-image-width: 10;
border-image-width: 10px;
border-image-width: 10em;
border-image-width: 10%;

border-image-width: 10px 10px;
border-image-width: 10px 10px 10px;
border-image-width: 10px 10px 10px 10px;

border-image-width: auto;

参考文献：CSS Backgrounds and Borders Module Level 3

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。