CSS border-image-width attribute

Definition and Usage

The border-image-width property specifies the width of the image border.

See also:

CSS3 Tutorial:CSS3 Borders

Example

Specify the width of the image border:

div
{
border-image-source: url(border.png);
border-image-width: 30 30;
}

CSS Syntax

border-image-width: number|%|auto;

Note:The four values of the border-image-width property define how the border image is divided into nine parts, representing the distances from the top, right, bottom, and left sides of the area inward. If the fourth value is omitted, it is the same as the second value. If the third value is omitted, it is the same as the first value. If the second value is omitted, it is the same as the first value. No negative values are allowed as border-image-width values.

Property Value

Value Description
number represents a multiple of the corresponding border-width.
% Refer to the size of the border image area: the height affects the horizontal offset, and the width affects the vertical offset.
auto If this property is specified, the width is the inherent width of the corresponding image slice.

Technical Details

Default Value: none
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.borderImageWidth="30 30"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 13.0 6.0 15.0

see also border-image property.