Open In App
Related Articles

HTML | DOM Style borderImageSource Property

Improve Article
Improve
Save Article
Save
Like Article
Like

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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 09 Aug, 2022
Like Article
Save Article
Similar Reads
Related Tutorials