Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style borderImage Property

  • Last Updated : 29 Jun, 2021

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 image 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 stretched.
  • 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. 
 

HTML




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

Output:
Before Click on the button:
 



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

Examples-2: Style borderImageSource Property. 
 

HTML




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

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

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :