Javascript DOM CSS Style borderImageOutset Property

Introduction

Place the border outside the edges of the <div> element: 

document.getElementById("myDIV").style.borderImageOutset = "5px 10px 20px 15px";

Click the button to change the value of the borderImageOutset property.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {//from  w  w  w  . j  a v a2s .  c  o  m
  background-color: lightgrey;
  border: 30px solid transparent;
  border-image: url('image3.png') 30 30 30 30 1 1 1 1 0 round;
}
</style>
</head>
<body>

<div id="main">
<p>
This is a DIV element that uses an image as a border.
</p>
</div>
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  document.getElementById("main").style.borderImageOutset = "5px 10px 20px 15px";
}
</script>
</body>
</html>

The borderImageOutset property sets or gets the amount by which the border image area extends beyond the border box.

If the fourth value is omitted, it is the same as the second.

If the third one is also omitted, it is the same as the first.

If the second one is also omitted, it is the same as the first.

Negative values are not allowed for any of the borderImageOutset values.

Property Values

Value Description
length A length unit specifying how far from the edges the border-image will appear. Default value is 0
number Represent multiples of the corresponding border-width
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The borderImageOutset property returns a String, representing the border-image-outset property of an element.




PreviousNext

Related