CSSリファレンス

border-image-repeatの意味と使い方

通常、ボーダーの画像は領域に合わせて拡大・縮小して表示されます。繰り返しとその方法を指定したい場合は、border-image-repeatプロパティを使用します。
キーワードは、上下の辺の表示方法と左右の辺の表示方法を、半角スペースで区切って記述します。値を1つだけ指定した場合は、上下と左右に同じ値を指定したものとみなされます。

値の指定方法

stretch

ボーダーの領域に合わせ、画像を引き伸ばして表示します。


repeat

ボーダーの領域に合わせ、画像を繰り返して表示します。領域にぴったり収まらない部分は裁ち落として表示します。


round

ボーダーの領域に合わせ、画像を繰り返して表示します。領域にぴったり収まらない場合は画像のサイズを調整して表示します。


関連プロパティ

  • border-image-source:ボーダーに使用する画像を指定する
  • border-image-slice:ボーダーに使用する画像の分割位置を指定する
  • border-image-width:ボーダー画像の幅を指定したい
  • border-image-outset:ボーダー画像の領域を広げる