CSS border-image-repeat Property

CSS `border-image-repeat` Property

The border-image-repeat property in CSS controls how the border image is repeated or stretched to fill the border area. This property is used in conjunction with border-image-source and border-image-slice to define how the image behaves in the border.

1. Syntax

selector {
  border-image-repeat: value;
}

2. Accepted Values

Value	Description	Example
`stretch`	The image is stretched to fill the entire border area (default).	`border-image-repeat: stretch;`
`repeat`	The image is repeated to fill the border area (tiled).	`border-image-repeat: repeat;`
`round`	The image is repeated and scaled to fit the border area, while maintaining aspect ratio.	`border-image-repeat: round;`
`space`	The image is repeated with space between them, and the last image is not clipped.	`border-image-repeat: space;`

3. Default Behavior – Stretch

By default, border-image-repeat is set to stretch, meaning the border image will stretch to fill the entire border area.

div {
  border: 10px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-repeat: stretch; /* Default behavior */
}

✅ The image will stretch to fill the border.

4. Example – Using `repeat`

With the repeat value, the image is tiled to cover the border area:

div {
  border: 10px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-repeat: repeat;
}

✅ The image will repeat along the border, tiling to cover the entire area.

5. Example – Using `round`

The round value makes the image repeat but scale it proportionally to fill the border area:

div {
  border: 10px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-repeat: round;
}

✅ The image will repeat and scale to fit the border while maintaining its aspect ratio.

6. Example – Using `space`

The space value will repeat the image with spaces between the images:

div {
  border: 10px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-repeat: space;
}

✅ The image will repeat along the border with space between the repeated images.

7. Combining Multiple Border Properties

You can use border-image-repeat along with other border properties like border-image-source, border-image-slice, and border-image-width:

div {
  border: 15px solid;
  border-image-source: url("border.png");
  border-image-slice: 40;
  border-image-width: 20px;
  border-image-repeat: repeat;
}

✅ The image will repeat across the border, and the width and slicing will determine how it’s applied.

8. Best Practices

✔ Use repeat for borders that need to be tiled.
✔ Use stretch when you want the image to cover the entire border area.
✔ Use round when you want proportional scaling of the image.
✔ Use space for decorative borders with equal spacing between images.

Souy Soeng

CSS border-image-repeat Property