border-image-repeat | WebReference

Definition

The border-image-repeat property in CSS specifies how a border image should be repeated or stretched to fill the area of a border.

Stretch the border image to fit the border:

border-image-repeat: stretch;

Tile the border image horizontally and vertically:

border-image-repeat: repeat;

Tile the border image horizontally, stretch it vertically:

border-image-repeat: repeat stretch;

Round the border image, scaling it if necessary to fully cover the border:

border-image-repeat: round;

Tile the border image horizontally, distributing any extra space vertically:

border-image-repeat: space repeat;

Value	Description
`stretch`	The image is stretched to fill the border area.
`repeat`	The image is tiled (repeated) to fill the border area.
`round`	The image is tiled (repeated) to fill the border area. If the image doesn't fully cover the border area, the image is rescaled so that it does.
`space`	The image is tiled (repeated) to fill the border area. If the image doesn't fully cover the border area, the extra space is distributed around the tiles.
`repeat-x`	The image is repeated horizontally.
`repeat-y`	The image is repeated vertically.
`repeat repeat`	The image is repeated both horizontally and vertically.
`repeat-x stretch`	The image is repeated horizontally and stretched vertically.
`repeat-y stretch`	The image is repeated vertically and stretched horizontally.
`repeat stretch`	The image is repeated horizontally and stretched vertically.
`round stretch`	The image is repeated horizontally, scaling it vertically if necessary to fully cover the border.
`space stretch`	The image is repeated horizontally, distributing any extra space vertically.
`stretch round`	The image is stretched horizontally, repeating it vertically if necessary to fully cover the border.
`stretch space`	The image is stretched horizontally, distributing any extra space vertically.
`stretch stretch`	The image is stretched both horizontally and vertically.

Use the stretch value if you want the border image to fill the entire border area. This can be useful if the image you're using for the border is a solid color or gradient, or if you want the image to be resized to fit the border exactly.
Use the repeat value if you want the border image to be tiled (repeated) to fill the border area. This can be useful if you're using a small image or pattern as the border image.
Use the round value if you want the border image to be tiled and scaled if necessary to fully cover the border area. This can be useful if you're using a small image or pattern as the border image, and you want it to be rescaled to fit the border exactly.
Use the space value if you want the border image to be tiled and any extra space distributed around the tiles. This can be useful if you're using a small image or pattern as the border image, and you want the tiles to be spaced evenly within the border area.
If you're using a large image as the border image, you may want to use the stretch value to ensure that the image fills the entire border area.
Keep in mind that the border-image-repeat property only works when used with the border-image-source property, which specifies the image to use for the border, and the border-image-slice property, which specifies how the image should be sliced into pieces to form the border.

Chrome	Firefox	Safari	Internet Explorer	Microsoft Edge	Opera
Yes	Yes	Yes	Yes	Yes	Yes