border-image-repeatでボーダー画像の繰り返しを指定【CSS】

border-image-repeatプロパティは、ボーダー画像の繰り返しを指定するプロパティです。

通常、ボーダー画像はボーダー領域に合わせて伸縮して表示されます。

値の指定方法

border-image-repeatプロパティでは、以下のような値を指定することができます。

stretch

stretchを指定すると、ボーダー画像は領域に合わせて伸縮して表示されます。

repeat

repeatを指定すると、ボーダー画像は領域を埋めるように繰り返して配置され、余分なところは切り取られます。

round

roundを指定すると、ボーダー画像は領域を埋めるように繰り返して配置され、余分なところが生じないようにサイズが調整されて表示されます。

space

spaceを指定すると、ボーダー画像は領域を埋めるように繰り返して配置され、余分なところは画像間のすき間としてあてられて表示されます。

値は1つ、もしくは半角スペースで区切って2つ指定でき、1つだけ指定した場合は上下左右に同じ値が適用され、2つ指定した場合は1つ目は上下辺、2つ目は左右辺の繰り返しに適用されます。