border-image-outset
CSS border-image-outset Property
The CSS border-image-outset property specifies the amount by which the border image is extended beyond the element’s border box. It is one of the CSS3 properties. The border-image-outset property takes from one to four values.
When one value is specified, it specifies all the four outsets.
When two values are specified, the first one specifies the top and bottom outsets, and the second one specifies the right and left outsets.
When three values are specified, the first one specifies the top outset, the second one specifies the right and left outsets, and the third one specifies the bottom outset.
When four values are specified, the outsets are set on the top, right, bottom and left sides in that order.
| 类目 | 类目 |
|---|---|
| Initial 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. |
| Version | CSS3 |
| DOM Syntax | object.style.borderImageOutset = “20px”; |
Syntax
Syntax
border-image-outset: length | number | initial | inherit;
Example of the border-image-outset property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 10px 0 15px;
}
</style>
</head>
<body>
<h2>Border-image-outset property example</h2>
<p class="border">Hello World!</p>
<p>Here is the original image:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%">
</body>
</html>
Result
Values
Values
| Value | Description | Play it |
|---|---|---|
| length | Specifies at what distance from the edges the border-image will appear. The default value is 0. | Play it » |
| number | The size of the border-image outset as a multiple of the element’s corresponding border widths. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property from its parent element. |