CSS3 border-image-outset Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The border-image-outset CSS property specifies the amount by which the border image area extends beyond the border box.
The following table summarizes the usages context and the version history of this property.
| Default value: | 0 |
|---|---|
| Applies to: | All elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the border-image-outset property in action.
Example
Try this code ».box {
width: 300px;
height: 150px;
border: 15px solid transparent;
border-image-source: url("border.png");
border-image-slice: 30;
border-image-outset: 15px;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| length | Specifies the distance in absolute or relative units that the border image extends beyond the border box. Negative values are not allowed. |
| number | Represents a multiple of the computed value of border-width, or the width of the border box. Negative values are not allowed. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element border-image-outset property. |
Browser Compatibility
The border-image-outset property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 Border, CSS Border.
Related properties: border-image, border-image-source, border-image-slice, border-image-width, border-image-repeat, border.
