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>
To Continue Learning Please Login
Login with Google