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

My Personal Notes
arrow_drop_up
Previous
HTML | DOM Input Week Object
Next

HTML | DOM Progress max Property
Related Articles
1.
HTML | DOM Style paddingLeft Property
2.
HTML DOM | Style pageBreakBefore Property
3.
HTML | DOM Style wordWrap Property
4.
HTML | DOM Style columnWidth Property
5.
HTML | DOM Style overflow Property
6.
HTML | DOM Style overflowY Property
7.
HTML | DOM Style overflowX Property
8.
HTML | DOM Style marginRight Property
9.
HTML | DOM Style objectPosition Property
10.
HTML | DOM Style textDecorationStyle Property
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
sayantanm19
@sayantanm19
Vote for difficulty





Improved By :
Article Tags :
Practice Tags :
Report Issue
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!