CSS Reference Property

border-image-repeat

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:

The nine image slices that a border image is sliced into.
The nine image slices that a border image is sliced into.

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-collapse is collapse
  • 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 repeat value, 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 repeat value, 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: border-img
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.

View this demo on the Codrops Playground

Browser Support

CSS3 Border images

Method of using images for borders

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 51
  • 50
  • 11
  • 38
  • 9.1

Mobile / Tablet

  • 9.3
  • 4.4
  • No
  • 59
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:18 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.