CSS border-image-repeat Property


The border-image-repeat CSS property determines how a border image is repeated or stretched to fill the area defined by an element's border. It is typically used in conjunction with the border-image-source property. There are several values that can be applied to border-image-repeat, including "stretch," which stretches the border image to cover the entire border, "repeat," which repeats the image to fill the border area, and "round," which repeats the image but adjusts the number of repetitions to ensure no partial images are displayed. This property allows web developers to control the visual treatment of border images, ensuring they adapt appropriately to different element sizes and shapes.

Initial value
Applies to
All elements
Computed value
Two keywords, one for each axis
JavaScript syntax

Interactive Demo

Example of the border-image-outset property.


border-image-repeat: [ stretch | repeat | round | space ]{1,2} 


  • stretchThe image is stretched to fill the area.
  • repeatThe image is tiled (repeated) to fill the area.
  • roundThe image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does.
  • spaceThe image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.


<div>Example of the border-image-repeat property</div>
div {
   border: 1em solid blue;
   border-image-source: url("images/border.png");
   border-image-repeat: round;
   border-image-width: 27px;
   border-image-slice: 27;
   border-image-outset: 20px;
   height: 70px;
   padding: 20px;
   margin: 20px;
   width: 200px;

Browser Support

The following table will show you the current browser support for the CSS border-image-repeat property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st January 2024