Skip to content
Related Articles

Related Articles

HTML | DOM Style borderImageSource Property

Improve Article
Save Article
  • Last Updated : 09 Aug, 2022
Improve Article
Save Article

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:

 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 =
        }
    </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:
        }
    </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:
        }
    </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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!