Javascript Reference - HTML DOM Style borderImageOutset Property

The borderImageOutset property sets or gets how large the border image area will be rendered beyond the border box.

Browser Support


`borderImageOutset`	Yes	11.0	Yes	6.0	No

Syntax

Return the borderImageOutset property:

var v = object.style.borderImageOutset

Set the borderImageOutset property:

object.style.borderImageOutset=length|number|initial|inherit

Property Values

Value	Description
length	Use the length unit. Default value is 0
number	Use number to multiply the corresponding border-width
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

Default Value:	0
Return Value:	A string representing the border-image-outset property
CSS Version	CSS3

Example

The following code shows how to position the border outside the edges of the <div> element.


<!DOCTYPE html>
<html>
<head>
<style> 
#main<!--from  w  w w .ja  v a2s. co m-->
{
    background-color:lightgrey;
    border:30px solid transparent;
    border-image: url('http://java2s.com/style/demo/border.png');
    border-image-slice: 30 30 30 30;
    border-image-width: 1 1 1 1;
    border-image-outset: 0;
    border-image-repeat: round;
}
</style>
</head>
<body>

<div id="main">
<p>
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. 
</p>
</div>
<button onclick="myFunction()">test</button>

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

The code above is rendered as follows: