The HTML DOM borderImageRepeat property is used to define how the image slices are repeated in border image. This sets or gets if the borderImage should be rounded, repeated or stretched.
Syntax
Following is the syntax for −
Setting the borderImageRepeat property.
object.style.borderImageRepeat = "stretch|repeat|round|initial|inherit"
Values
The property values are explained as follows −
| Sr.No | Values & Description |
|---|---|
| 1 | Stretch This makes the image stretched to fill the area. This is the default value. |
| 2 | Repeat This makes the image is repeated to fill the area. |
| 3 | Round The image is usually repeated to fill the area and it is rescaled if it doesn’t fill the area with the whole number of times. |
| 4 | Space Same as round but if the image isn’t repeated whole number of times then the space around tiles is distributed. |
| 5 | initial For setting this property to initial value. |
| 6 | inherit To inherit the parent property value |
Example
Let us look at an example for the borderImageRepeat property −
<!DOCTYPE html>
<html>
<head>
<style>
#b1 {
border: 30px solid transparent;
padding: 5px;
border-image-source:
url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structurealgorithm.jpg");
border-image-repeat: repeat;
border-image-slice: 30;
}
</style>
<script>
function changeBorderRepeat(){
document.getElementById("b1").style.borderImageRepeat="stretch";
document.getElementById("Sample").innerHTML="The border image will now be
stretched";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="b1">This is some random text inside the paragraph. Here is another line in this paragraph</p>
<p>Change the above div border image repeat property by clicking the below button</p>
<button onclick="changeBorderRepeat()">Change Border Repeat</button>
<p id="Sample"></p>
</body>
</html>Output
This will produce the following output −
On clicking the COLLAPSE BORDER button −
