CSS 'border-image-width' Property Explained

The CSS 'border-image-width' property specifies the width of the border image on all four sides of an element. This property allows for scaling the border image beyond or within the border's dimensions, enabling more flexible and creative border designs that can adapt to various element sizes and shapes.

CSS 'border-image-width' Property Examples

See the Pen CSS 'border-image-width' Property by Webzstore (@webzstore) on CodePen.

The 'border-image-width' property offers significant flexibility in designing borders. It enables the integration of detailed graphical elements into the borders of web elements, enhancing the visual appeal and thematic consistency of web designs.

Browser Support For 'border-image-width' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border-image-width for the full compatibility details, including mobile browsers.

CSS Syntax of the 'border-image-width' Property

border-image-width: [ <length-percentage> | <number> | auto ]{1,4};

/* Example: the image is only drawn when a border-image-source is set */
.frame {
  border: 20px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 2;        /* number: 2 x the border-width = 40px */
}

• A single value applies to all four sides.
• Two values set the top and bottom first, then the left and right.
• In that order, three values determine the top, horizontal, and bottom dimensions.
• Four values specify the dimensions of the top, right, bottom, and left.

Usage of the 'border-image-width' Property

Use 'border-image-width' to adjust the border image's size relative to an element's border area. This is particularly useful when you want to control how much of the border image is visible or to ensure that the border image scales correctly in response to changes in the element's size. It supports fixed measurements, percentages, unitless numbers (multiples of the border width), and auto, offering a range of options for fine-tuning border appearances. It only has an effect when a border image is set (for example with border-image-source), and its default value is 1, meaning the image is drawn at the element's border-width. If the image width is larger than the border width, the border image extends over the padding and content edge.

Property Values of the 'border-image-width' Property

• Length: Defines the width using non-negative length units (e.g., px, em).
• Percentage: Specifies the width as a percentage of the border image area: its width for the left and right edges, and its height for the top and bottom edges. Must not be negative.
• Number: A non-negative unitless number that is multiplied by the corresponding border-width. For example, with border-width: 10px, border-image-width: 2 gives a 20px border image width.
• Auto: The width is the intrinsic width or height of the corresponding border-image-slice. If the image has no such intrinsic dimension, the corresponding border-width is used instead.
• Initial: Resets the 'border-image-width' to its default value (1).
• Inherit: Inherits the 'border-image-width' from the parent element.