[CSS] border-image-widthプロパティでボーダー画像の幅を指定しよう!

1.border-image-widthとは?

border-image-widthプロパティはボーダー画像の幅を指定します。

border-image-widthプロパティの値が要素のborder-widthよりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。

値の指定方法は以下の通りです。

{ border-image-width: 値; }

値の指定方法

値は半角スペースで区切って4つまで指定できます。

上辺、右辺、下辺、左辺の幅の順に適用されます。

値を省略した場合、以下のような指定になります。

2.border-image-widthの使い方

それではborder-image-widthの使い方をみていきましょう。

.border-sample {
 width: 200px; 
 height: 120px;
 border: 1px solid blue;
 border-image-source: url("sample.png");
 border-image-width: 20px;
}

他にも値を設定できるのでいろいろと試してみることをお勧めします!