If this property's value is greater than the element's border-width
, the border image will extend beyond the padding [and/or content] edge.
Syntax
/* Keyword value */
border-image-width: auto;
/* value */
border-image-width: 1rem;
/* value */
border-image-width: 25%;
/* value */
border-image-width: 3;
/* top and bottom | left and right */
border-image-width: 2em 3em;
/* top | left and right | bottom */
border-image-width: 5% 15% 10%;
/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;
/* Global values */
border-image-width: inherit;
border-image-width: initial;
border-image-width: revert;
border-image-width: revert-layer;
border-image-width: unset;
The border-image-width
property may be specified using one, two, three, or four values chosen from the list of values below.
- When one value is specified, it applies the same width to all four sides.
- When two values are specified, the first width applies to the top and bottom, the second to the left and right.
- When three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom.
- When four values are specified, the widths apply to the top, right, bottom, and left in that order [clockwise].
Values
The width of the border, specified as a or a
. Percentages are relative to the width of the border image area for horizontal offsets and the height of the border image area for vertical offsets. Must not be negative.
border-image-width =0
[ | | auto ]{1,4}
=
|
The width of the border, specified as a multiple of the corresponding border-width
. Must not be negative.
border-image-width =2
[ | | auto ]{1,4}
=
|
The width of the border is made equal to the intrinsic width or height [whichever is applicable] of the corresponding
border-image-width =3. If the image does not have the required intrinsic dimension, the corresponding
[ | | auto ]{1,4}
=
|
border-width
is used instead.Formal definition
Initial value
border-image-width =5Applies toall elements, except internal table elements when
[ | | auto ]{1,4}
=
|
border-image-width =6 is
[ | | auto ]{1,4}
=
|
border-image-width =7. It also applies to
[ | | auto ]{1,4}
=
|
border-image-width =8.InheritednoPercentagesrefer to the width or height of the border image areaComputed valueas specified, but with relative lengths converted into absolute lengthsAnimation typeby computed value type
[ | | auto ]{1,4}
=
|