値
パターン1
border-widthプロパティで指定した太さを上書きすることができます。
border-widthプロパティは必ず指定しておく必要があります。
CSS コード例
border-width: 20px;
border-style: dashed;
border-image-source: url(https://gray-code.com/border-image-width/pic01.webp);
border-image-width: 40px;表示例
パターン2
値が2つの場合、1つ目は上下左右の画像の高さ、2つ目の値は上下左右の画像の横幅として適用されます。
CSS コード例
border-width: 20px;
border-style: dashed;
border-image-source: url(https://gray-code.com/border-image-width/pic01.webp);
border-image-width: 5px 20px;表示例
パターン3
値が3つの場合、1つ目は左上と右上の画像の高さに適用され、2つ目の値は4つの横幅に適用され、3つ目は左下と右下の高さに適用されます。
次の例では、5pxは左上と右上の画像の高さ、20pxは全ての幅を指定、40pxは左下と右下の画像の高さを指定しています。
CSS コード例
border-width: 20px;
border-style: dashed;
border-image-source: url(https://gray-code.com/border-image-width/pic01.webp);
border-image-width: 5px 20px 40px;表示例
パターン4
値を4つの指定した場合、1つ目の値は左上と右上の画像の高さ、2つ目の値は右上と右下の画像の横幅、3つ目の値は右下と左下の画像の高さ、4つ目の値は左下と左上の画像の横幅となります。
次の例では、5pxは左上と右上の画像の高さ、20pxは右上と右下の画像の横幅、40pxは左下と右下の画像の高さ、10pxは左上と左下の画像の横幅を指定しています。
CSS コード例
border-width: 20px;
border-style: dashed;
border-image-source: url(https://gray-code.com/border-image-width/pic01.webp);
border-image-width: 5px 20px 40px 10px;表示例