HTML | DOM Style borderImageOutset Property

In the Style borderImageOutset Space which contains the border, image is to be painted is called the border-image space. By default, the boundaries of the border image area match with the boundaries of the element’s border-box. However, these boundaries can be extended using the border-image-outset property.

The border-image-outset property specifies the amount by which the border-image space extends far from the element’s border-box area. This amount is described as a set of outset values that specify the amount by which the border-image space will expand from the top, right, bottom, and left edges.

Syntax:



  • It returns the borderImageOutset property
    object.style.borderImageOutset
  • It is used to set the borderImageOutset property
    object.style.borderImageOutset="length|number|initial|inherit"

Return value: It returns the amount by which the border image area extends beyond the border box.
Property Values

    length:It specifies the distance how far from the edge of element it will appear. It is given in pixels. Default value is 0.

    • Syntax:

      borderImageOutset = "10px"

      Example:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
        
      <head>
          <style>
              #GFG {
                  width: 200px;
                  height: 150px;
                  margin-left: 180px;
                  font-size: 20px;
                  background-color: lightgrey;
                  border: 20px solid transparent;
                  border-image: 
                    50 50 stretch;
                  border-image-outset: 5px;
              }
          </style>
      </head>
        
      <body align="center">
          <button onclick="myGeeks()">Click it</button>
          <p>On click, border-image-outset property changes.</p>
          <div id="GFG">
              <p align="center">
                  GeeksforGeeks
              </p>
          </div>
          <script>
              function myGeeks() {
                  document.getElementById("GFG")
                      .style.borderImageOutset = "10px";
              }
          </script>
      </body>
        
      </html>                

      chevron_right

      
      

      Output:

      • Before click on button:
      • After click on button:
    • Syntax:

      borderImageOutset = "5px 10px"

      Example:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
        
      <head>
          <style>
              #GFG {
                  width: 200px;
                  height: 150px;
                  margin-left: 180px;
                  font-size: 20px;
                  background-color: lightgrey;
                  border: 20px solid transparent;
                  border-image: 
                    50 50 stretch;
                  border-image-outset: 5px;
              }
          </style>
      </head>
        
      <body align="center">
          <button onclick="myGeeks()">Click it</button>
          <p>On click, border-image-outset property changes.</p>
          <div id="GFG">
              <p align="center">
                  GeeksforGeeks
              </p>
          </div>
          <script>
              function myGeeks() {
                  document.getElementById("GFG")
                      .style.borderImageOutset = "5px 10px";
              }
          </script>
      </body>
        
      </html>            

      chevron_right

      
      

      Output:

      • Before click on button:
      • After click on button:
    • Syntax:

      borderImageOutset = "5px 7px 10px"

      Example:


      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
        
      <head>
          <style>
              #GFG {
                  width: 200px;
                  height: 150px;
                  margin-left: 180px;
                  font-size: 20px;
                  background-color: lightgrey;
                  border: 20px solid transparent;
                  border-image:
                    50 50 stretch;
                  border-image-outset: 5px;
              }
          </style>
      </head>
        
      <body align="center">
          <button onclick="myGeeks()">Click it</button>
          <p>On click, border-image-outset property changes.</p>
          <div id="GFG">
              <p align="center">
                  GeeksforGeeks
              </p>
          </div>
          <script>
              function myGeeks() {
                  document.getElementById("GFG")
                  .style.borderImageOutset = "5px 7px 10px";
              }
          </script>
      </body>
        
      </html>            

      chevron_right

      
      

      Output:

      • Before click on button:
      • After click on button:
    • Syntax:

      borderImageOutset = "5px 7px 10px 12px"

      Example:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
        
      <head>
          <style>
              #GFG {
                  width: 200px;
                  height: 150px;
                  margin-left: 180px;
                  font-size: 20px;
                  background-color: lightgrey;
                  border: 20px solid transparent;
                  border-image: 
                    50 50 stretch;
                  border-image-outset: 5px;
              }
          </style>
      </head>
        
      <body align="center">
          <button onclick="myGeeks()">Click it</button>
          <p>On click, border-image-outset property changes.</p>
          <div id="GFG">
              <p align="center">
                  GeeksforGeeks
              </p>
          </div>
          <script>
              function myGeeks() {
                  document.getElementById("GFG")
                  .style.borderImageOutset = "5px 7px 10px 12px";
              }
          </script>
      </body>
        
      </html>                    

      chevron_right

      
      

      Output:

      • Before click on button:
      • After click on button:
  • number:It takes decimal value. If the borderWidth is k and borderImageOutset is 2, It means that borderImage will be 2*k distance from the border of element.
    Syntax:

    borderImageOutset = "1.2"

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            #GFG {
                width: 200px;
                height: 150px;
                margin-left: 180px;
                font-size: 20px;
                background-color: lightgrey;
                border: 20px solid transparent;
                border-image: 
                  50 50 stretch;
                border-image-outset: 5px;
            }
        </style>
    </head>
      
    <body align="center">
        <button onclick="myGeeks()">Click it</button>
        <p>On click, border-image-outset property changes.</p>
        <br>
        <br>
        <div id="GFG">
            <p align="center">
                GeeksforGeeks
            </p>
        </div>
        <script>
            function myGeeks() {
                document.getElementById("GFG")
                    .style.borderImageOutset = "1.2";
            }
        </script>
    </body>
      
    </html>                

    chevron_right

    
    

    Output:

    • Before click on button:
    • After click on button:
  • inherit: When no value specified for this field, it is inherited from the parent of element. If there is no parent means this element is root then it takes initial(or default) value.
  • initial: The initial keyword describes a property’s initial value as its specified value. Which says that no matter what the inherited or cascaded value of the property is, it will be reset to its default initial value.

Browser Support: The browser supported by DOM Style borderImageOutset property are listed below:

  • Google Chrome 15.0
  • Internet Explorer 11.0
  • Mozila firefox 15.0
  • Opera 15.0
  • Safari 6.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.