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

    Recommended Posts: