CSS - border-image-repeat Property

This property specifies whether the border image should be repeated, rounded, spaced or stretched. The default value is stretched.

Possible Values

  • stretch − It strecthes the image to fill the border area. It is the default value.

  • repeat − It repeats the image to fill the area.

  • round − It results in repetition of the image (tiles) to fill the area and if the whole image is not filling up, then the image is rescaled.

  • space − It results in repetition of the image (tiles) to fill the area and if the whole image is not filling up, the extra space is distributed around the tiles.

  • initial − It sets the default value to the property.

  • inherit − It inherits the property from the parent element.

Applies to

All the HTML elements.

DOM Syntax

object.style.borderImageRepeat = "repeat|space|round|stretch";

Example

Here is the example which shows effect of this property −

<html>
<head>
   <style>
   .box1 {

            border: 20px solid;
            border-image-source: url(images/border.png);
            border-image-slice: 33%;
            border-image-repeat: stretch ;
        }
     .box2 {
            border: 20px solid;
            border-image-source: url(images/border.png);
            border-image-slice: 33%;
            border-image-repeat: repeat;
        }
        .box3 {
            border: 20px solid;
            border-image-source: url(images/border.png);
            border-image-slice: 33%;
            border-image-repeat: round;
        }
        .box4 {
            border: 20px solid;
            border-image-source: url(images/border.png);
            border-image-slice: 33%;
            border-image-repeat: space;
        }
   </style>
</head>
<body>
        <p class="box1">border-image-repeat with value stretch</p>
        <p class="box2">border-image-repeat with value repeat</p>
        <p class="box3">border-image-repeat with value round</p>
        <p class="box4">border-image-repeat with value space</p>
</body>
</html>
Advertisements