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

Syntax:

borderImageOutset = "10px"

Example:

html

<!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:  
url('https://media.geeksforgeeks.org/wp-content/uploads/bir1.png')  

              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>

Output:
- Before click on button:
- After click on button:

Syntax:

borderImageOutset = "5px 10px"

Example:

html

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

              url( 
'https://media.geeksforgeeks.org/wp-content/uploads/bir1.png')  

              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>

Output:
- Before click on button:
- After click on button:

Syntax:

borderImageOutset = "5px 7px 10px"

Example:

html

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

              url( 
'https://media.geeksforgeeks.org/wp-content/uploads/bir1.png')  

              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>

Output:
- Before click on button:
- After click on button:

Syntax:

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

Example:

html

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

              url( 
'https://media.geeksforgeeks.org/wp-content/uploads/bir1.png')  

              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>

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:

html

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

              url( 
'https://media.geeksforgeeks.org/wp-content/uploads/bir1.png')  

              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>

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
Edge 12.0
Internet Explorer 11.0
Mozilla firefox 15.0
Opera 15.0
Safari 6.0

Article Tags :

HTML

Web Technologies

HTML-DOM