CSS border-image-repeat

The border-image-repeat property is used to specify how a border image is repeated. It can also be prevented from repeating. Its shorthand property is border-image.

CSS

border-image-repeat: value;

Values

stretch : Border image stretches along the edge between the corners. This is the default value.

repeat : Border image gets repeated along the edge between the corners.

round : Border image gets repeated along the edge between the corners. If a border image doesn't fill the gap between the corners on repeating a whole number of times, then the repeated images get resized (stretched or squished) till the gap between the corners gets filled.

space : Border image gets repeated along the edge between the corners. If a border image doesn't fill the gap between the corners on repeating a whole number of times, then the extra space gets distributed between the repeated images till the gap between the corners gets filled.

initial : Sets the default value.

inherit : Inherits the value from parent element.

Example

Have a look at the effect of different border-image-repeat values on the repetition behaviour of a border image.

HTML

<div id="div1">border-image-repeat: stretch</div>

CSS

div {
  width: 400px;
  padding: 10px;
  border: solid 20px;
  border-image-source: url('/path/image.jpg');  
  border-image-slice: 29%;
  border-image-width: 20px;
}

#div1 {
  border-image-repeat: stretch;
}

See the Pen CSS border-image-repeat by Aakhya Singh (@aakhya) on CodePen.

In this demo, note that the images got resized when the border-image-repeat property is set to round, and the whitespace got evenly distributed when set to space.

The other three properties border-image-source, border-image-slice and border-image-width are used to set the border image, slice the border image and set the width of the border image respectively.

Note: The border-style property must be defined before the border-image-source property to set a border image.

Giving different values for different border sides

You can give one or two values to the border-image-repeat property.

Giving two values

The first value defines the repetition behaviour for top and bottom parts and the second value defines the repetition behaviour for the right and left parts of a border image.

CSS

border-image-repeat: repeat stretch;

For the above declaration

• repetition type for top and bottom is repeat
• repetition type for right and left is stretch

Giving one value

It defines the repetition behaviour for all the four parts of a border image.

CSS

border-image-width: stretch;

For the above declaration

• repetition type for all the four parts is stretch

Another demo is given below.

See the Pen CSS border-image-repeat by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is not supported in IE 10 and its earlier versions.