HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

ボーダー イメージ ウィズ

border-image-widthプロパティ

ボーダー画像の幅を指定するプロパティです。border-widthプロパティで指定した幅を上書きすることができます。

  • 初期値

    100%

  • 継承

    不可

  • 適用できる要素

    全要素

パターン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;

表示例:

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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