Skip to content
Related Articles

Related Articles

HTML | DOM Style borderImageSource Property
  • Last Updated : 30 Jul, 2019

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"

Property Values

  1. none: This sets the property to use no image.

    Example-1:




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




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




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




    <!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:
      inherit-before

    • After pressing the button:
      inherit-after

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

  • Chrome
  • Internet Explorer 11.0
  • Firefox
  • Safari 6.0

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :