The border-image-width property is used to scale the border-image slices created by the border-image-slice property.

The border image width will tell the browser how wide each border side is so that it can scale the border image to fit in it.

The area inside which the border image is to be painted is called the border image area. By default, the boundaries of the border image area correspond to the boundaries of the element’s border box. (However, the boundaries of the border image area can be extended using the border-image-outset property.)

The border-image-width is specified as a list of offsets from the boundaries of the border image area.

The border-image-width property can take four, three, two, or one offset values.

When four values are specified, they set the offsets on the top, right, bottom and left sides in that order. If three values are specified, the first one specifies the top offset, the second one specifies the right and left offsets, and the third one specifies the bottom offset. If two values are specified, the first one specifies the top and bottom offsets, and the second one specifies the right and left offsets. If one value is specified, it specifies all the four offsets.

If two opposite border-image-width offsets are large enough that they overlap, then the used values of all border-image-width offsets are proportionally reduced until they no longer overlap.

The offsets specified by the border-image-width property are then used to scale the slices of the border image obtained from the border-image-slice property.

The top and bottom edge (Edge 1 and Edge 3) are scaled so that their height matches the top and bottom offsets of the border-image-width, and their width is scaled proportionally. The right and left edges (Edge 2 and Edge 4) are scaled so that their width matches that specified by the right and left offsets of the border-image-width, and their height is scaled proportionally.

The width of the top and bottom edges, and the height of the right and left edges then rescaled in a next step based on the value of the border-image-repeat property.
You can read more about how these properties work together in the border-image shorthand property entry.

The height and width of the border image corners (corners 1 through 4 in the above image) is determined by scaling the corners to the offsets of the edges that they are part of. For example, the top right corner slice, will be scaled so that its width matches the right offset of the border-image-width and its height matches the top offset provided by the border-image-width property.

As for the middle slice of the border image, is it either discarded or preserved, depending on whether the fill value is present in the border-image-slice property. If it is preserved, its width is scaled by the same factor as the top image edge unless that factor is zero or infinity, in which case the scaling factor of the bottom is substituted, and failing that, the width is not scaled. The height of the middle image is scaled by the same factor as the left image edge unless that factor is zero or infinity, in which case the scaling factor of the right image is substituted, and failing that, the height is not scaled.

Notes and Trivia

A lot of resources may tell you that you must or should specify the same border image width offsets as the border-image-slice offsets. You don’t have to do that, but sometimes, depending on the border image you’re using and the effect you’re after, it may be simpler to do so.