The border-image-outset property sets a border image outset.
It specifies how far the image extends beyond the border.
Values are specified in pixels or in numbers where 1 unit is equal to the border width.
A border image with a border-image-outset.
<style>
.border-image-outset {
padding: 15px;
border: 30px solid transparent;
border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
border-image-outset: 10px;
}
</style>
<div class="border-image-outset">
Element with image border outset
</div>
border-image-outset: length | number |
initial | inherit;
| Value | Description |
|---|---|
| length | Sets how far from the edges the border-image in units will appear. The default value is 0 |
| number | Multiples of the corresponding border-width |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different border-image-outset values.
<style>
.border-image-outset-border {
border: 20px solid transparent;
padding: 15px;
margin: 30px;
border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
border-image-outset: 1.5;
}
</style>
<div class="border-image-outset-border">
Element with border image outset setting
</div>
This table shows when border-image-outset support started for each browser.
 Chrome
|
15.0 | Oct 2011 |
 Firefox
|
15.0 | Aug 2012 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
15.0 | May 2013 |
 Safari
|
6.0 | Jul 2012 |
