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:

border image demo

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:

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 »