HTML | DOM Style borderImageSource Property
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
Please Login to comment...