mask-border-source property is used to specify an image that is to be used as a mask border image.
The mask border image is set to an element using the same steps used to set a border image. The mask border image is drawn as described by the
mask-border-repeat properties, similar to the way a border image is drawn as described by the
mask-border-source property is usually set as part of the shorthand
mask-border property. For a detailed explanation on how these properties work with the
mask-border-source property, see the
mask-border shorthand property’s entry.
An image that is an empty image (zero width or zero height), that fails to download, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) is ignored. It still counts as an mask border image but does not mask the element.
Trivia & Notes
The application of the
mask-border-source property to an element formatted with the CSS box model establishes a stacking context in the same way that the CSS
opacity property does, and all the element’s descendants are rendered together as a group with the masking applied to the group as a whole.
mask-border-source property has no effect on the geometry or hit-testing of any element’s CSS boxes. Which means that it does not affect how the element responds to pointer events.
mask-border-source and the
mask-image property can be specified independent of each other. If both properties have a value other than
none, the element is masked by both masking operations one after the other. And it does not matter if
mask-image is applied to the element before or after
mask-border-source. Both operation orders result in the same rendering.
Note that the
mask shorthand property resets the values of the properties
mask-border-source: none | <image>
- Initial: none
- Applies To: All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
- Animatable: no
- No mask border image is applied.
imageentry for a list of possible values.
A computed value of other than
none results in the creation of a stacking context the same way that CSS
opacity property does for values other than 1.
mask-border-image: url(border-mask.png); mask-border-image: none; mask-border-image: linear-gradient(black, transparent); /* a linear gradient is an <image> */
mask-border shorthand property entry for a live demo.
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
Supported from the following versions:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com
This module, as you can see in the support table above, hasn’t been fully implemented in all browsers, so you’re probably not going to be able to use all features even in browsers that have implemented certain properties (for the time being).
In the meantime, you can check out this open source feature support table by Alan Greenblatt on GitHub. The purpose of this table is to provide some insight into what the current state of affairs is with various browser implementations of CSS Clipping and Masking features.