border-image-widthプロパティ

値

パターン1

border-widthプロパティで指定した太さを上書きすることができます。
border-widthプロパティは必ず指定しておく必要があります。

CSSコード例

border-width: 20px;
border-style: dashed;
border-image-source: url(https://gray-code.com/wp-content/uploads/2016/07/bg_html-300x101.png);
border-image-width: 40px;

表示例：

パターン2

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

CSSコード例

border-width: 20px;
border-style: dashed;
border-image-source: url(https://gray-code.com/wp-content/uploads/2016/07/bg_html-300x101.png);
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/wp-content/uploads/2016/07/bg_html-300x101.png);
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/wp-content/uploads/2016/07/bg_html-300x101.png);
border-image-width: 5px 20px 40px 10px;

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。