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"

Property Values

none: This sets the property to use no image.

Example-1:

<!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:  
url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); 
        } 
    </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:

image: This sets the image to the path specified.

Example-2:

<!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 = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png')"; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

initial: This is used to set this property to its default value.

Example-3:

<!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:  
url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); 
        } 
    </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:

inherit: This is used to inherit the property from its parent.

Example-4:

<!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:  
url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); 
        } 
    </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:
inherit-before

After pressing the button:

Supported Browsers: The browser supported by borderImageSource Property are listed below:

Chrome
Internet Explorer 11.0
Firefox
Safari 6.0

My Personal Notes

Recommended Posts: