CSS border-image-repeat

The CSS CSS border-image-repeat property is used to specify whether the border image should be repeated or not. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 10px solid transparent; padding: 12px;
         border-image-source: url(images/border-image-demo.png);
         border-image-slice: 24;}
      p#one {border-image-repeat: repeat;}
      p#two {border-image-repeat: space;}
      p#three {border-image-repeat: round;}
      p#four {border-image-repeat: stretch;}
   </style>
</head>
<body>

   <p id="one">This is a para.</p>
   <p id="two">This is another para.</p>
   <p id="three">This is para three.</p>
   <p id="four">This is the last para.</p>
   
</body>
</html>

Output

This is a para.

This is another para.

This is para three.

This is the last para.

In above program, the image used is:

CSS border-image-repeat Syntax

The syntax of border-image-repeat property in CSS, is:

border-image-repeat: x;

The value of x should be any of the following:

repeat - used to repeat the image to fill the border area
round - same as repeat. But if border area is not completely filled with tiled or repeated images, then the image gets re-scaled and used to fill the complete border area
stretch - used to stretch the image to fill the border area. This is the default value
space - used to fill the border with repeated or tiled images. If it doesn't completely fill the border area with all tiles, then extra space gets placed around all the tiles
initial - used to set the default value
inherit - used to inherit the value from its parent

Let's create another example to differentiate the repeat and round value for border-image-repeat property:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 15px solid transparent; padding: 12px;
         border-image-source: url(images/border-image-demo.png);
         border-image-slice: 1;}
      p#one {border-image-repeat: repeat;}
      p#two {border-image-repeat: round;}
   </style>
</head>
<body>

   <p id="one">This is para one.</p>
   <p id="two">This is para two.</p>
   
</body>
</html>

Output

This is para one.

This is para two.

See the corner of the border in both the cases. The round one looks more attractive.

CSS Online Test

« Previous Tutorial Next Tutorial »