HTML | DOM Style borderImage Property

The DOM Style borderImage Property in HTML is a shorthand property used for setting the borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset and borderImageRepeat properties.

Syntax:

  • It is used to return the borderImage property.
    object.style.borderImage
  • It is used to set the borderImage property.
    object.style.borderImage = "source slice width outset repeat|
    initial|inherit"
  • Property Values: In the borderImage property there is 7 property value which is mentioned above described below:

    • border-Image-Source: This parameter holds the source imgae that will be used.
    • border-Image-Slice: This parameter specify the inward offsets of the image-border.
    • border-Image-Width: This parameter holds the width of the used image border.
    • border-Image-Outset: This parameter defines which of the border area should extended.
    • border-Image-Repeat: This parameter define that the border should repeated, rounded or streched.
    • initial: This property value is used to set this property to its default value.
    • inherit: This property value is used to inherit this property from its parent element.

    Return Values:
    It returns a string value which represent the border-image property of an element.

    Examples-1: This show how to change the border-image.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            #my {
                border: 50px solid transparent;
                width: 250px;
                padding: 15px 15px;
                
                 <!-- Safari 5 -->
                -webkit-border-image: 
                  100 100 stretch;
                
                 <!-- Opera 12 -->
                -o-border-image: 
                  100 100 stretch;
                  
                 border-image: 
                   100 100 stretch;
            }
        </style>
    </head>
      
    <body>
      
        <h3>Click the "Change" button to change the border-image property</h3>
      
        <button onclick="myFunction()">Change</button>
      
        <div id="my">
            <h1><font color="green">GeeksForGeeks</font></h1>
        </div>
      
        <script>
            function myFunction() {
                  <!-- Code for Safari 5 -->
                document.getElementById("my").style.WebkitBorderImage = 
                
                 <!-- Code for Opera 12 -->
                document.getElementById("my").style.OBorderImage = 
      
                document.getElementById("my").style.borderImage = 
            }
        </script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Before Click on the button:

    After Click on the button:“Border of the image has changed”

    Examples-2: Style borderImageSource Property.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            div {
                border: 30px solid transparent;
                border-image: 
                border-image-slice: 30;
                border-image-width: 1 1 1 1;
                border-image-outset: 0;
                border-image-repeat: round;
            }
        </style>
    </head>
      
    <body>
        <h3>Here are the two images used:</h3>
        <img src=
             height="100" width="100">
        
        <img src=
             height="100" width="100">
        
        <div id="main">
            <h1><center><font color="green" >
              GeeksForGeeks
             </font></center></h1>
        </div>
      
        <h3>Click the "Change" button to change the value of the borderImageSource property.</h3>
      
        <button onclick="myFunction()">Change</button>
      
        <script>
            function myFunction() {
                document.getElementById("main").style.borderImageSource = 
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    Before Click on the button:

    After Click on the button:

    Supported Browsers: The browser supported by DOM Style borderImage Property are listed below:

    • Google Chrome 1.0
    • Internet Explorer 4.0
    • Firefox 1.0
    • Opera 3.5
    • Safari 1.0


    My Personal Notes arrow_drop_up

    Small things always make you to think big

    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.