HTML | DOM Style borderImageSource Property

Last Updated : 21 Oct, 2021

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

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

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

Related Articles

Table of Contents

HTML | DOM Style borderImageSource Property