The border-image-repeat property specifies how the slices of an image used as a border image are scaled and tiled.
A border image is sliced into nine images using the border-image-slice property:
If the middle part of the border image can be used as a background image for the element depending on the value of border-image-slice. The side images (edges of the border image) are placed on the sides of the element.
The border-image-repeat property specifies how the images for the sides (Edges 1 through 4 in the image above) and the middle part of the border image (center in the image above) are scaled and tiled.
The images can be set to repeat over the border and background areas, respectively, or can be set to stretch to fill those areas.
The border-image-repeat takes one keyword as a value or two keywords—the first keyword applies to the horizontal sides (top and bottom), the second to the vertical ones (right and left). If the second keyword is absent, it is assumed to be the same as the first.
Trivia & Notes
We recommend you check the border-image shorthand property entry for more information about the process and steps of applying a border image to an element.
Official Syntax
-
Syntax:
border-image-repeat: [ stretch | repeat | round | space ]{1,2} - Initial: stretch
-
Applies To: All elements, except internal table elements when
border-collapseiscollapse - Animatable: no
Values
- stretch
- The image is stretched to fill the area. This is the default value. If this is the first keyword, then the top, center, and bottom border image tiles will be stretched horizontally to fit the entire area. If this is the second keyword, then the left, center, and right border image tiles will be stretched vertically to fit the entire area.
- repeat
- The image is tiled to fill the area. If this keyword is used as the first keyword, then the top, center, and bottom border image tiles will be centered horizontally in their respective areas, and repeated as much as necessary to fill the area horizontally. If this keyword is used as the second keyword, the left, center, and right are centered vertically in their respective areas, and then repeated as much as necessary to fill the area.
- round
-
Similar to the
repeatvalue, the image is tiled (repeated) to fill the area the same way. Only difference is that if it does not fill the area with a whole number of tiles, the image is rescaled so that it does. - space
-
Similar to the
repeatvalue, the image is tiled (repeated) to fill the area the same way. Only difference is that if it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.
Examples
The following are all valid border-image-repeat values.
border-image-repeat: stretch round;
border-image-repeat: repeat;
border-image-repeat: round space;
border-image-repeat: space;
Live Demo
The border image used is the following: 
Play with the value of the border-image-repeat property to see how that affects the border image on the edges of the border and center of the element.
Browser Support
CSS3 Border images
Method of using images for borders
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 56
- 50
- 11
- 43
- 15
Mobile / Tablet
- 15
- 130
- No
- 130
- 130
