CSS border-image-outset

The border-image-outset property in CSS is used to determine the distance by which an element's border image is placed outside the border box. This property can be used to create interesting effects by adjusting the spacing between the border image and the element's border.

The syntax for the border-image-outset property is as follows:

border-image-outset: top right bottom left;

Each value represents the outset distance for the corresponding side of the element (top, right, bottom, left).

Here is an example illustrating how the border-image-outset property works:

Result:

This is a bordered element with custom outset values.

In the example above, the border-image-outset property is set to 20 10 30 5. This means that the border image will be outset by 20px on the top, 10px on the right, 30px on the bottom, and 5px on the left.

Experiment with different outset values to see how they affect the appearance of the border image on your elements!