CSS border-image-width

The border-image-width property sets the width of the border image regions of an element. A border image is sliced into four edges and four corners by CSS. They are then resized to the width set by this property, to be used in place of the normal border of an element. The border image width is equal to the border width of an element by default, in order to cover it completely.

border-image-width can set each edge to a different width, or all the same. It affects the width of the real border (as set by border) nor the sizing of the element. If the width of the image is greater than the width of the element, the border image may extend into the padding (if any) and content areas of the element.

num%pxptemvw...
border-image-width: widths
border-image-width: 2;          /* 2 x border-width */
border-image-width: 10%;        /* % of border image area */
border-image-width: 20px;
border-image-width: 2 1 1 2;    /* for each edge: top right bottom left */

Giving a number with no units is pretty useful since it's multiplied by the border width of the element. This makes the border image auto adjust to changes in border width. border-image-width takes up to four values which give the top, right, bottom and left border image widths. A missing bottom is the same as top and a mising left is the same as right.

Browser Support: border-image properties are supported by most modern browsers. IE introduced support until IE11. See the caniuse.com compatibility table for details.

Usage

border-image-width is good for overriding the image width because it preserves the rest of the border image properties (border-image-source, border-image-slice...), as opposed to the border-image shorthand. Consider using the shorthand to save some lines of CSS but take into account that it resets the property values.

Take the following 30 x 30px image with 10px borders:

colorful border-image

The image is sliced at 10px from each border using border-image. border-image-width controls the final width to which each slice is resized. The slice widths and final displayed image widths are controled separately.

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: 0 1 1 0;
}

border-image-outset moves the border images into the margin area by a specified length. In the example, it prevents the border from getting into the padding area. Remove the line to see what I mean.

border-image-width vs border-width

It's important to make clear that border-image-width never affects the width of the border or the size of the element. Border images are placed relative to the border but in a different layer. Border images may paint the padding and margin areas of the element if border-image-width > border-width but they'll never change the width set by border-width properties. The content itself is not covered because the border image layer is painted behind it.

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>