CSS border-image-outset

The border-image-outset property sets the length to which the border image extends beyond the border box into the margin area of an element. Boder images are sliced, resized and used in place of the border of an element. The image is sliced as set by border-image-slice and then resized to the width set by border-image-width. border-image-outset is used mostly when the image border is wider than the border of the element. Because border images do not affect the border width of the element, the image will be inset into the padding/content areas by default. The property allows to rather outset the image into the margin area.

numpxptemvw...
border-image-outset: outsets
border-image-outset: 2;         /* 2 x border-width */
border-image-outset: 20px;      
border-image-outset: 2 1 3 4;   /* for each edge: top right bottom left */

Numbers with no units are relative to the border width of the element. border-image-outset takes up to four values which give the top, right, bottom and left border outsets. If one is missing, it is set the same as the oposite edge. If a single value is given, it applies to the four edges.

Browser Support: Supported by modern browsers. IE introduced support until IE11. See the border images compatibility table (caniuse.com) for details.

Usage

Use border-image-outset to override the outset while preserving the values of the rest of the border image properties (border-image-width, border-image-repeat...). The shorthand, border-image, is used to set the outset along with the image URL and the rest of the properties at once.

The outset is relative to the outer width of each border, displacing the image outward.

colorful border-image

The previous image is sliced at 10px from each border using border-image, in the example below. The border is then outset into the margin area by border-image-outset

div.frame {
margin: 30px; padding: 30px; border: 10px solid orange; border-image: url('color_frame.png') 10; border-image-width: 1 2 2 1; border-image-outset: 1 2 2 1;
}

border-image-width sets the width of the border image slices. In the example, both outset and width are given four values, which are applied to the top, right, bottom and left borders respectively. Because the width is equal to the offset, all four borders are drawn within the margin area. The 10px border is cleared.

Outset and Box Size

border-image-outset and the rest of border-image properties do not affect the size or border width of an element. The border image is placed relative to the border but in a different layer. If border-image-width is greater than border-width, the image extends into the padding/content area by default but border-image-outset may displace it outward into the margin area. It may even be drawn outside of the margin area, all without affecting the flow and sizing of elements.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>