border-image-widthでボーダー画像の幅を指定【CSS】

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

border-widthプロパティの幅に従うボーダー画像の幅をborder-image-widthプロパティで上書きできます。

値の指定方法

border-image-widthプロパティでは、単位付きの数値か%値などで指定します。

単位については、『CSSにおける長さ・大きさ・角度・時間の単位について【CSS】』の記事を参考にしてください。

また、border-widthプロパティの値を基準として、倍数を指定することもできますし、autoを指定することもできます。

必ずしも4つの値を指定する必要はなく、指定する値の数によって、適用のされ方が異なります。

値が1つの場合

指定する値が1つの場合、すべての辺に同じ値が適用されます。

値が2つの場合

指定する値が2つの場合、1つ目の値が上下辺、2つ目の値が左右辺に適用されます。

値が3つの場合

指定する値が3つの場合、1つ目の値が上辺、2つ目の値が左右辺、3つ目の値が下辺に適用されます。

値が4つの場合

指定する値が4つの場合、上辺、右辺、下辺、左辺の順番に値が適用されます。