The DOM Style borderImageSource Property is used to set or return the image to be used instead of the styles given by the border-style property.
Syntax:
- To get the borderImageSource property
object.style.borderImageSource
- To set the borderImageSource property
object.style.borderImageSource = "none | image | initial | inherit"
Return Values: It returns a string value which represents the border-image-source property of an element.
Property Values
1. none: It is a default value. This sets the property to use no image.
Example-1:
html
<!DOCTYPE html><html lang="en">
<head>
<title>DOM Style borderImageSource Property</title>
<style>
.item {
height: 50px;
border: 25px solid transparent;
/* Setting the border before demonstrate
the effect of 'none' */
border-image:
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderImageSource Property</b>
<p>Click on the button to change
the source of border-image</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeSource()">
Change source of border-image
</button>
<script>
function changeSource() {
elem = document.querySelector('.item');
// Setting the border image source to none
elem.style.borderImageSource = "none";
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After pressing the button:
2. image: This sets the image to the path specified.
Example-2:
html
<!DOCTYPE html><html lang="en">
<head>
<title>DOM Style borderImageSource Property</title>
<style>
.item {
height: 50px;
border: 25px solid transparent;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderImageSource Property</b>
<p>Click on the button to change the source of border-image</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeSource()">
Change source of border-image
</button>
<script>
function changeSource() {
elem = document.querySelector('.item');
// Setting the border image source to another image
elem.style.borderImageSource =
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
3. initial: This is used to set this property to its default value.
Example-3:
html
<!DOCTYPE html><html lang="en">
<head>
<title>DOM Style borderImageSource Property</title>
<style>
.item {
height: 50px;
border: 25px solid transparent;
/* Setting the border before to
demonstrate the effect of 'initial' */
border-image:
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderImageSource Property</b>
<p>Click on the button to change the source of border-image</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeSource()">
Change source of border-image
</button>
<script>
function changeSource() {
elem = document.querySelector('.item');
// Setting the border image source to initial
elem.style.borderImageSource = "initial";
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After pressing the button:
4. inherit: This is used to inherit the property from its parent.
Example-4:
html
<!DOCTYPE html><html lang="en">
<head>
<title>DOM Style borderImageSource Property</title>
<style>
.item {
height: 50px;
border: 25px solid transparent;
}
#parent {
/* Setting the border of parent
demonstrate the effect of 'inherit' */
border-image:
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderImageSource Property</b>
<p>Click on the button to change
the source of border-image</p>
<div id="parent">
<div class="item">GeeksforGeeks</div>
</div>
<button onclick="changeSource()">
Change source of border-image
</button>
<script>
function changeSource() {
elem = document.querySelector('.item');
// Setting the border image source
// to inherit from its parent
elem.style.borderImageSource = "inherit";
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After pressing the button:
Supported Browsers: The browser supported by borderImageSource Property are listed below:
- Chrome 15
- Edge 12
- Internet Explorer 11
- Firefox 15
- Safari 6
- Opera 15