CSS Property border-image-outset








The border-image-outset property sets the amount of the border image area which will extend beyond the border box.

Summary

Initial value
0
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.borderImageOutset="5px 10px 15px 20px"
Animatable
no

CSS Syntax

border-image-outset: length|number{1,4};

We can supply one to four values.

One-value syntax

border-image-outset: sides                  
e.g. border-image-outset: 10%; 

Two-value syntax

border-image-outset: vertical horizontal    
e.g. border-image-outset: 10% 30%; 

Three-value syntax

border-image-outset: top horizontal bottom  
e.g. border-image-outset: 30px 30% 45px; 

Four-value syntax

border-image-outset: top right bottom left  
e.g. border-image-outset: 7px 12px 14px 5px;




Property Values

length
length from the edges the border-image will appear. Default value is 0.
number
multiples of the corresponding border-width
initial
sets to default value
inherit
Inherits this property from its parent element

Browser compatibility

border-image-outset Yes 11.0 Yes Yes 15.0

Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--  www . ja  v  a2 s .  c om-->
    margin:100px;
    background-color: lightgrey;
    border: 30px solid transparent;
    border-image: url('http://java2s.com/style/demo/border.png');
    border-image-slice: 30;
    border-image-outset: 30px;
}
</style>
</head>
<body>
    
    <div>
    This DIV uses an image as a border.
    </div>
    <p>Here is the image used:</p>
    <img src="http://java2s.com/style/demo/border.png">
</body>
</html>

Click to view the demo