mask-border-width
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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 and all graphics elements |
| Inherited | no |
| Percentages | relative to width/height of the mask border image area |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |
Formal syntax
mask-border-width =
[ <length-percentage> | <number> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
Examples
Basic usage
mask-border-width defines 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.
/* Final mask scaled down to 20px wide */
mask-border-slice: 30 fill;
mask-border-width: 20px;
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.
Specifications
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-border-width |
Browser compatibility
Loading…