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