borderImageOutset Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:borderImageOutset

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. borderImageOutset

Description

The borderImageOutset property sets or gets the length that the border image area can go beyond the border box.

Property Values

Value Description
length A length unit. Default to 0
number multiples of the corresponding border-width
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 0
Return Value: A String, representing the border-image-outset property of an element
CSS VersionCSS3

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main//from  w  ww .  ja  v a  2  s. c o  m
{
background-color:lightgrey;
border:30px solid transparent;
border-image: url('http://java2s.com/resources/a.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 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>

Related Tutorials