HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

ボーダー イメージ

border-imageプロパティ

ボーダー画像に関する指定を一括で行うプロパティです。

  • 初期値

    各プロパティの初期値

  • 継承

    不可

  • 適用できる要素

    全要素

このプロパティでは、次のプロパティへの設定を一括で指定することができます。値の設定方法は各プロパティに準拠します。

border-image-sliceプロパティborder-image-widthプロパティborder-image-outsetプロパティを指定する場合は「/(半角スラッシュ)」で区切って指定します。


パターン1

次の例では、全てのプロパティに関する設定を指定しています。

CSSコード例

border: 20px dashed gray;
border-image: url(https://gray-code.com/wp-content/uploads/2016/07/border-dot-sample.png) 20% / 20px / 10px repeat;

表示例:


パターン2

次の例では、border-image-sourceプロパティborder-image-sliceプロパティborder-image-repeatプロパティについて値を指定しています。

CSSコード例

border: 20px dashed gray;
border-image: url(https://gray-code.com/wp-content/uploads/2016/07/border-dot-sample.png) 20% repeat;

表示例:


パターン3

次の例では、border-image-widthプロパティ以外の指定を行っています。
border-image-sliceプロパティに関しては値を2つ指定し、「/」で区切ってborder-image-outsetプロパティを指定しています。

CSSコード例

border: 20px dashed gray;
border-image: url(https://gray-code.com/wp-content/uploads/2016/07/border-dot-sample.png) 20% 10% / / 10px repeat;

表示例:

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

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

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