CSS border-image-outset property specifies how much the border image area should extend beyond the border box.
In simple words, the border-image-outset property sets a distance between element’s border-box and the border image. It can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also accept an absolute number.
Example:
.div1{
border-image-source: url(images/border-diamonds.png);
border-image-outset: 15px;
}
.div2{
border-image-source: url(images/border-diamonds.png);
border-image-outset: 30px;
}
Specify border-image-outset Using an Absolute Number
The border-image-outset property can also accept an absolute number. Here, the border-image-outset is calculated by multiplying the value specified by the border-width property to the specified absolute number.
For example, if the element has border-width: 30px; and border-image-outset: 0.5;
This means, the border-image-outset will be 0.5*30px = 15px; Refer to the example below:
Example:
div{
border-image-source: url(images/border-diamonds.png);
border-width: 30px;
border-image-outset: 0.5;
}
CSS Syntax
The border-image-outset property has the below syntax:
border-image-outset: length|number|initial|inherit;
Property Values
The border-image-outset property accepts the following values:
| length | Specifies the distance between element’s border-box and border image in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. The default value is 0. |
| number | The border-image-outset is calculated by multiplying the border-width property value to the specified number. The calculated value is in pixels. |
| initial | Sets the border-image-outset property to its default value(0). |
| inherit | Inherits the border-image-outset property from the parent element. |
General Info
| Default Value | 0 |
| Inherited | No |
| JavaScript Usage | element.style.borderImageOutset = “30px”; |
Related Pages
CSS Tutorial: CSS Borders
