Open In App

HTML | DOM Style borderImageSource Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 09 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads