The mask-border-width CSS property sets the width of an element's mask border.
Syntax
/* Keyword value */ mask-border-width: auto; /* <length> value */ mask-border-width: 1rem; /* <percentage> value */ mask-border-width: 25%; /* <number> value */ mask-border-width: 3; /* top and bottom | left and right */ mask-border-width: 2em 3em; /* top | left and right | bottom */ mask-border-width: 5% 15% 10%; /* top | right | bottom | left */ mask-border-width: 5% 2em 10% auto; /* Global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: revert; mask-border-width: revert-layer; mask-border-width: unset;
The mask-border-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
<length-percentage>-
The width of the mask border, specified as a
<length>or a<percentage>. Percentages are relative to the width of the border area for horizontal offsets and the height of the border area for vertical offsets. Must not be negative. <number>-
The width of the mask border, specified as a multiple of the corresponding
border-width. Must not be negative. auto-
The width of the mask border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding
mask-border-slice. If the image does not have the required intrinsic dimension, the correspondingborder-widthis used instead.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element |
| Inherited | no |
| Computed value | all <length>s made absolute, otherwise as specified |
| Animation type | discrete |
Formal syntax
[ <length-percentage> | <number> | auto ]{1,4}Examples
Basic usage
This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to mask-border-slice will cause the slices to be scaled to fit the border mask.
mask-border-width: 30 fill;
Chromium-based browsers support an outdated version of this property — mask-box-image-width — with a prefix:
-webkit-mask-box-image-width: 20px;
Note: The mask-border page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.