HTML | DOM Style borderImageSource Property

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.