The HTML DOM borderImageOutset property is used for setting or returning the value by which background image area extends the element border box. By using values for top, left, right and bottom we can specify how much the background image will extend from respective border of the element.
Syntax
Following is the syntax for −
Setting the borderImageOutset property −
object.style.borderImageOutset = "length|number|initial|inherit"
The property values are explained as follows −
| Value | Description |
|---|---|
| Length | For defining how far the image will extend from the border box. The default value is set to 0 i.e. it doesn’t extend beyond border box. |
| Number | For defining a number value that is multiple of the border-width. |
| Initial | For setting this property to initial value. |
| Inherit | To inherit the parent property value |
Example
Let us look at the example for the borderImageOutset property −
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border: 20px solid transparent;
margin: 20px;
border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30
round;
border-image-outset: 5px;
background-color: lightgreen;
}
</style>
<script>
function changeBottomOutset(){
document.getElementById("P1").style.borderImageOutset="20px";
document.getElementById("Sample").innerHTML="The border image outset is now
increased";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="P1"> This is a sample paragraph containing some text. This paragraph is created only for the sake of this example</p>
<p>Change the above div border image outset by clicking the below button</p>
<button onclick="changeBottomOutset()">Change Bottom Outset</button>
<p id="Sample"></p>
</body>
</html>Output
This will produce the following output −
On clicking the “Change Border Outset” button −
