1. css
  2. /properties
  3. /border-image-repeat

border-image-repeat

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.

Examples

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;

Values

ValueDescription
stretchThe image is stretched to fill the border area.
repeatThe image is tiled (repeated) to fill the border area.
roundThe 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.
spaceThe 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-xThe image is repeated horizontally.
repeat-yThe image is repeated vertically.
repeat repeatThe image is repeated both horizontally and vertically.
repeat-x stretchThe image is repeated horizontally and stretched vertically.
repeat-y stretchThe image is repeated vertically and stretched horizontally.
repeat stretchThe image is repeated horizontally and stretched vertically.
round stretchThe image is repeated horizontally, scaling it vertically if necessary to fully cover the border.
space stretchThe image is repeated horizontally, distributing any extra space vertically.
stretch roundThe image is stretched horizontally, repeating it vertically if necessary to fully cover the border.
stretch spaceThe image is stretched horizontally, distributing any extra space vertically.
stretch stretchThe image is stretched both horizontally and vertically.

Best Practices

  • 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.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes