How to use border-image-width attribute

The border-image-width attribute is used to specify the width of the image border; you can set 4 values ​​to divide the border image area into nine parts of the offset, which represent the upper, right, lower, left, and both sides. Inward distance.

CSS3 border-image-width property

Function: Specifies the image The width of the border.

Syntax:

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

number: represents a multiple of the corresponding border-width.​

%: The size of the reference border image area--the height of the area affects the horizontal offset, and the width affects the vertical offset.

auto: If this attribute is specified, the width is the inherent width of the corresponding image slice.

Description: The four values ​​of the border-image-width attribute specify the offset that divides the border image into nine parts. They represent distances inward from the top, right, bottom, and left of the area. 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.

Note: Internet Explorer 10 and earlier versions, Opera, Safari 5 and earlier versions do not support the border-image-width attribute.

CSS3 border-image-width attribute usage example

div
{
border-image-source: url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg);
border-image-width: 30 30;
}

The above is the detailed content of How to use border-image-width attribute. For more information, please follow other related articles on the PHP Chinese website!