The border-image-width property controls how thick the image-based border appears by specifying how much of the source image’s edges are used and painted along each side of the element’s frame. Conceptually it sets the thickness of the nine-slice “edge” regions of the border image: larger widths make the decorative image edges occupy more space around the element, while smaller widths reduce that painted band and let more of the element’s content/padding area remain visible. Because it defines the area of the image that becomes the border, it directly influences how the image is scaled or tiled when painted along the four edges and in the corners.

This property works together with the other parts of the border-image system. The shorthand border-image bundles the related settings, while border-image-source provides the image to use and border-image-slice determines how that image is partitioned into corner and edge pieces. How the edge pieces are repeated or stretched along each side is controlled by border-image-repeat, and whether the painted border extends beyond the border box can be affected by border-image-outset. Together these properties decide the final appearance: the slice cuts the image, this property specifies how thick those cut edges are when painted, and repeat/outset controls tiling and placement.

Because border images replace or augment the usual framed border, border-image-width also interacts with the conventional border properties. If there is no visible border (for example, because border-style is set to none or the computed border-width is zero), the border image will not be painted in the typical way. Additionally, the widths chosen can affect layout and visual balance: wider image borders reduce the space available for content inside the box and change how corner graphics align with the element’s box edges, so designers should consider how these widths relate to any declared border widths and the element’s padding when planning responsive or precise layouts.

In practice, authors use border-image-width to tune the visual weight of an image border independently of the image’s intrinsic slice positions - for example, to make an ornate frame appear thicker or thinner without editing the source image. Because the value can be set differently per side, it also enables asymmetric framing effects (thicker top border, thinner sides, etc.). When combined thoughtfully with the slice, repeat, and outset settings, controlling the image border width gives fine control over both the aesthetic and the way the image is fitted to varying element sizes.