border-image-outsetでボーダー画像の領域を広げる【CSS】

border-image-outsetプロパティは、ボーダー画像の領域を外側に広げるサイズを指定します。

サイズの指定方法

border-image-outsetプロパティでは、広げるサイズを単位付き数値で指定するか、border-widthプロパティの値を基準にして、広げるサイズの倍数を指定します。

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

値が1つの場合

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

値が2つの場合

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

値が3つの場合

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

値が4つの場合

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