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:

  • 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 »

Follow/Like Us on Facebook




Subscribe Us on YouTube