【CSS Modules】border-image-widthプロパティの使い方

border-image-widthプロパティは、要素の境界に適用されるイメージボーダー（画像による境界線）の幅を保持するプロパティです。このプロパティを使用することで、border-image-sourceで指定された画像が境界線として表示される領域の幅を制御できます。

指定できる値は、数値（例えばpxやemなどの単位を伴う）、パーセンテージ、またはキーワードautoです。パーセンテージで指定した場合、それは要素のborder-widthに対する割合として解釈されます。autoと指定すると、border-image-sliceプロパティで設定された画像のスライス幅と同じ値が適用されます。

border-image-widthは、要素の物理的な境界線の太さを示すborder-widthプロパティとは異なる概念であることに注意が必要です。border-image-widthは、画像が境界線として描画される「領域の幅」を定義し、この領域内に画像が収まるように伸縮または切り取られて表示されます。

もしborder-image-widthの値がborder-widthの値よりも大きい場合、画像は要素の物理的な境界線の外側にはみ出して描画されます。逆に、border-image-widthの値がborder-widthの値よりも小さい場合、画像は物理的な境界線の内側にトリミングされるか、border-image-outsetプロパティを用いて境界線から外側へ拡張することも可能です。

このプロパティには、top、right、bottom、leftの各辺に対して1つから4つの値を指定できます。1つの値は全ての辺に、2つの値は上下と左右に、3つの値は上、左右、下の順に、4つの値は上、右、下、左の順に適用されます。これにより、各辺のイメージボーダーの幅を個別に調整し、より柔軟なデザインを実現することが可能になります。

Copy
1border-image-width: 30px;

引数なし

引数はありません

戻り値なし

戻り値はありません