HTML DOM Style borderImageRepeat Property
Last Updated :
25 Aug, 2023
The borderImageRepeat style property in HTML DOM is used to set or return the borderImageRepeat property. It specifies whether the border image should repeat to fill the area, stretched to fill the area, set to the initial value, inherit property from its parent, etc. Depending on the need it will be set accordingly to make the image border look more attractive.
Syntax:
- It returns the borderImageRepeat property.
object.style.borderImageRepeat
- It sets the borderImageRepeat property.
object.style.borderImageRepeat = "stretch | repeat | round | initial | inherit"
Return value: It returns the border-image repeat property.
Property Values:
1. stretch: This property is used to stretch the image to fill the area. It is the default value.
Syntax:
object.style.borderImageRepeat = "stretch";
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#GFG {
border: 20px solid transparent;
width: 200px;
padding: 10px 20px;
/* For Safari Browser */
-webkit-border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 round;
/* For Opera Browser */
-o-border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 round;
border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 round;
}
</style>
</head>
<body>
<div id="GFG">
<h1>GeeksforGeeks</h1>
</div>
<br>
<button onclick="myGeeks()">
Click Here!
</button>
<p>
Click on button to change property
</p>
<script>
function myGeeks() {
/* For Safari Browser */
document.getElementById("GFG")
.style.WebkitBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 stretch";
/* For Opera Browser */
document.getElementById("GFG")
.style.OBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 stretch";
document.getElementById("GFG")
.style.borderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 stretch";
}
</script>
</body>
</html>
Output:
2. repeat: This property is used to repeat the border-image to fill the area.
Syntax:
object.style.borderImageRepeat = "repeat";
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#GFG {
border: 20px solid transparent;
width: 200px;
padding: 10px 20px;
/* For Safari Browser */
-webkit-border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 stretch;
/* For Opera Browser */
-o-border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 stretch;
border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 stretch;
}
</style>
</head>
<body>
<div id="GFG">
<h1>GeeksforGeeks</h1>
</div>
<br>
<button onclick="myGeeks()">
Click Here!
</button>
<p>
Click on button to change property
</p>
<script>
function myGeeks() {
/* For Safari Browser */
document.getElementById("GFG")
.style.WebkitBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 repeat";
/* For Opera Browser */
document.getElementById("GFG")
.style.OBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 repeat";
document.getElementById("GFG")
.style.borderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 repeat";
}
</script>
</body>
</html>
Output:
3. round: It is used to repeat the image to fill the area. If the image doesn’t fill the area in a whole number of tiles the image is rescaled.
Syntax:
object.style.borderImageRepeat = "round";
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#GFG {
border: 20px solid transparent;
width: 200px;
padding: 10px 20px;
/* For Safari Browser */
-webkit-border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 stretch;
/* For Opera Browser */
-o-border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 stretch;
border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 stretch;
}
</style>
</head>
<body>
<div id="GFG">
<h1>GeeksforGeeks</h1>
</div>
<br>
<button onclick="myGeeks()">
Click Here!
</button>
<p>
Click on button to change property
</p>
<script>
function myGeeks() {
/* For Safari Browser */
document.getElementById("GFG")
.style.WebkitBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 round";
/* For Opera Browser */
document.getElementById("GFG")
.style.OBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 round";
document.getElementById("GFG")
.style.borderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 round";
}
</script>
</body>
</html>
Output:
4. space: The only difference with the repeat value is that if it does not fill the area with a whole number of tiles, then extra space is distributed around the tiles.
Syntax:
object.style.borderImageRepeat = "space";
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#GFG {
border: 20px solid transparent;
width: 200px;
padding: 10px 20px;
/* For Safari Browser */
-webkit-border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 stretch;
/* For Opera Browser */
-o-border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 stretch;
border-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/bir1.png") 50 50 stretch;
}
</style>
</head>
<body>
<div id="GFG">
<h1>GeeksforGeeks</h1>
</div>
<br>
<button onclick="myGeeks()">
Click Here!
</button>
<p>
Click on button to change property
</p>
<script>
function myGeeks() {
/* For Safari Browser */
document.getElementById("GFG")
.style.WebkitBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 space";
/* For Opera Browser */
document.getElementById("GFG")
.style.OBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 space";
document.getElementById("GFG")
.style.borderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png) 50 50 space";
}
</script>
</body>
</html>
Output:
5. initial: It is used to set borderImageRepeat property to its default value.
6. inherit: It is used to set borderImageRepeat property from its parent element.
Browser Support: The browser supported by DOM style borderImageRepeat property are listed below:
- Google Chrome 15
- Edge 12
- Internet Explorer 11
- Mozilla firefox 15
- Opera 15
- Safari 6
Similar Reads
HTML DOM Subscript Object
The Subscript Object in HTML DOM is used to represent the HTML <sub> element. The subscript element can be accessed by using the getElementById() method. Syntax: document.getElementById("id") Where id is assigned to the <sub> tag. Example 1: In this example, we will use DOM Subscript Obj
1 min read
HTML | DOM Fieldset Object
The DOM Fieldset Object is used to represent the HTML <fieldset> element. The fieldset element is accessed by getElementById(). Properties: disabled: disabled property used to set or return whether a fieldset is disabled, or not.form: use to return a reference to the form that contains the fie
2 min read
HTML DOM Figure Object
The DOM Figure Object is used to represent the HTML <figure> element. The figure element is accessed by getElementById(). Syntax: document.getElementById("ID"); Where “id†is the ID assigned to the “figure†tag. Example 1: In this example, we will use DOM Figure Object. HTML <!DOCTYPE html
2 min read
HTML DOM Section Object
The Section Object in HTML DOM is used to represent the HTML <section> element. The section element can be accessed by using the getElementById() method. Syntax: document.getElementById("id") Where id is assigned to the <section> tag. Example 1: In this example, we will use DOM Section O
1 min read
HTML DOM Nav Object
The DOM nav object is used to represent the HTML <nav> element. The<nav> element is accessed by getElementById(). Syntax: document.getElementById("id") Where id is assigned to the <nav> tag. Note: The Nav Object is not supported by Internet Explorer 8 and earlier versions. Example
1 min read
HTML DOM insertAdjacentText() Method
The insertAdjacentText() inserts a provided text at one of the following positions. afterbegin:afterend:beforebegin:beforeend: Syntax: node.insertAdjacentText(position, text) Parameters: This method requires 2 parameters. position: A position relative to the element. The legal values are:afterbegin:
1 min read
HTML DOM Style borderImage Property
The DOM Style borderImage Property in HTML is a shorthand property used for setting the borderImageSource, borderImageSlice, borderImageWidth,borderImageOutset, and borderImageRepeat properties. Syntax: It is used to return the borderImage property. object.style.borderImageIt is used to set the bord
2 min read
HTML DOM stopPropagation() Event Method
The stopPropagation() method is used to stop the propagation of event calling. That is a parent event is called we can stop the propagation of calling its children by using the stopPropagation() method and vice-versa. Syntax: event.stopPropagation() Return Value: It does not return any value. Exampl
2 min read
HTML DOM Emphasized Object
The HTML DOM Emphasized object represents the <em> element, used to emphasize text, typically rendering it in italics. It can be accessed and manipulated through JavaScript to alter its content or styling.Syntax:document.getElementById("ID");Example: Clicking the "Submit" button changes the em
1 min read
HTML DOM type Event Property
The type event property in HTML DOM is used to return the type of the triggered event. It returns a string that represents the type of the event. The events can be keyboard events or mouse events. Syntax: event.type Return Value: It returns a string that represents the type of event. Example: In thi
1 min read