CSS border-image-repeat Property

The border-image-repeat CSS property specifies how the middle part of the border image are scaled or tiled so that it can match the size of the border.

The border-image-repeat property in CSS is used to scaling and tiling the border images. It can be used to match the middle part of the border-image to the size of the border. It can have either one or two values. One is for horizontal and one for the vertical axis. Only one value is given then it applies to all sides, but two values are given it is given one value for horizontal and another for vertical sides.

CSS Syntax

border-image-repeat: stretch|repeat|round|initial|inherit;

Note: This property specifies how the images for the sides and the middle part of the border image are scaled and tiled. So, you can specify two values here. If the second value is omitted, it is assumed to be the same as the first.

Example -

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg1 { 
  border: 15px solid transparent;
  padding: 15px;
  border-image-source: url(/css/images/border1.png);
  border-image-repeat: repeat;
  border-image-slice: 30;
}

#borderimg2 { 
  border: 15px solid transparent;
  padding: 15px;
  border-image-source: url(/css/images/border1.png);
  border-image-repeat: round;
  border-image-slice: 30;
}

#borderimg3 { 
  border: 15px solid transparent;
  padding: 15px;
  border-image-source: url(/css/images/border1.png);
  border-image-repeat: stretch;  
  border-image-slice: 30;
}
</style>
</head>
<body>

<h1>The border-image-repeat Property</h1>
<p>The border-image-repeat property specifies whether the border image should be repeated, rounded or stretched:</p>

<h2>border-image-repeat: repeat:</h2>
<p id="borderimg1">Here, the image tiles to fill the area. Tiles are divided if necessary.</p>

<h2>border-image-repeat: round:</h2>
<p id="borderimg2">Here, the image tiles to fill the area. The image is rescaled if necessary, to avoid dividing tiles.</p>

<h2>border-image-repeat: stretch (default):</h2>
<p id="borderimg3">Here, the image is stretched to fill the area.</p>

<p>Here is the original image:</p>
<img src="/css/images/border1.png">

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image-repeat property.</p>

</body>
</html>