This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The mask-border-outset
CSS property specifies the distance by which an element's mask border is set out from its border box.
Syntax
/* <length> value */ mask-border-outset: 1rem; /* <number> value */ mask-border-outset: 1.5; /* vertical | horizontal */ mask-border-outset: 1 1.2; /* top | horizontal | bottom */ mask-border-outset: 30px 2 45px; /* top | right | bottom | left */ mask-border-outset: 7px 12px 14px 5px; /* Global values */ mask-border-outset: inherit; mask-border-outset: initial; mask-border-outset: unset;
The mask-border-outset
property may be specified as one, two, three, or four values. Each value is a <length>
or <number>
. Negative values are invalid.
- When one value is specified, it applies the same outset to all four sides.
- When two values are specified, the first outset applies to the top and bottom, the second to the left and right.
- When three values are specified, the first outset applies to the top, the second to the left and right, the third to the bottom.
- When four values are specified, the outsets apply to the top, right, bottom, and left in that order (clockwise).
Values
<length>
- The size of the mask border outset as a dimension.
<number>
- The size of the mask border outset as a multiple of the corresponding
border-width
.
Formal syntax
[ <length> | <number> ]{1,4}
Specifications
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The definition of 'mask-border-outset' in that specification. |
Candidate Recommendation | Initial definition |
Initial value | 0 |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements |
Inherited | no |
Media | visual |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | discrete |
Canonical order | per grammar |
Browser compatibility
TBD