border-image-width

This property defines the width of the border-image.

Syntax

As with other width properties, a length unit or percentages can be used. A plain number can be used as well, which will represent a multiplication factor of the respective border-width. Percentages refer to the width and height of the border image area for horizontal and vertical offsets respectively. This property can receive anywhere from one to four values. The four values represent the top, right, bottom and left border-image-widths respectively. If the fourth and third values aren’t specified, they are copied over from their opposite side counterpart. While if only one value is specified, it is applied to all sides.

/* Using a length unit: */
border-image-width: 14px;
border-image-width: 1em 2em 1.5em 3em;

/* Using a plain number: */
border-image-width: 3;

/* Using percentages: */
border-image-width: 25% 10%;

Values

length
A length unit that specifies the width of the border-image.

percentage
A percentage value that refers to the size of the border image area. The width of the area is taken for horizontal offsets, while the height is taken for vertical offsets.

number
If a plain number is used, it represents a multiplication factor of the respective border-width.

auto
If the property is set to auto, the width of the border-image is set to the intrinsic width or height of the respective border-image-slice. If the image does not have the required intrinsic dimension, the respective border-width is used instead.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-image-width? Submit a codepen.io demo and we'll showcase it here ↴