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>