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: 
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:

none-before

After pressing the button:

none-after

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

</html>

Output:

Before clicking the button:

image-before

After clicking the button:

image-after

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: 
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:

initial-before

After pressing the button:

initial-after

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: 
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:

After pressing the button:

inherit-after

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

Chrome 15
Edge 12
Internet Explorer 11
Firefox 15
Safari 6
Opera 15

HTML | DOM Style borderImageSource Property

Explore