CSS 'border-image-repeat' Property Explained

The CSS 'border-image-repeat' property defines how the border image is repeated around the element's border. This property controls whether the image is stretched, repeated, or tiled to fit the border area, allowing for various stylistic effects that can enhance the visual appeal of an element's borders.

CSS 'border-image-repeat' Property Examples

See the Pen CSS 'border-image-repeat' Property by Webzstore (@webzstore) on CodePen.

The 'border-image-repeat' property provides a powerful way to customize the repetition and arrangement of images along an element's borders, supporting the creation of visually engaging and unique border designs.

Browser Support For 'border-image-repeat' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border-image-repeat for the full compatibility details, including mobile browsers.

CSS Syntax of the 'border-image-repeat' Property

border-image-repeat: stretch | repeat | round | space | initial | inherit;

Usage of the 'border-image-repeat' Property

Use 'border-image-repeat' to specify a border image's repeating behavior. This is particularly useful when you want to create specific patterns or effects with border images, such as seamless patterns, mirrored images, or stretched images that cover the entire border without repeating. It allows for creative border designs beyond simple solid colors or styles.

Property Values of the 'border-image-repeat' Property

• Stretch: The image is stretched to fill the border area.
• Repeat: The image is tiled (repeated) in the border area.
• Round: The image is repeated and scaled to fit by adjusting its size to fill the area without being clipped. If it cannot be filled with a whole number of tiles, the image is rescaled to fit.
• Space: The image is repeated to fill the area without being clipped. If it cannot be filled with a whole number of tiles, extra space is distributed around the images.
• Initial: Resets the 'border-image-repeat' to its default value (stretch).
• Inherit: Inherits the 'border-image-repeat' from the parent element.