Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style borderImageRepeat Property
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 −
Updated on: 21-Aug-2019
40 Views
Advertisements