The 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-slice, mask-border-width, mask-border-outset, and mask-border-repeat properties, similar to the way a border image is drawn as described by the border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties.
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.
The 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, mask-border-source, mask-border-mode, mask-border-slice, mask-border-width, mask-border-outset and mask-border-repeat.
Official Syntax
-
Syntax:
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
Values
- none
- No mask border image is applied.
- <image>
-
See the
imageentry for a list of possible values.
Notes
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.
Examples
mask-border-image: url(border-mask.png);
mask-border-image: none;
mask-border-image: linear-gradient(black, transparent); /* a linear gradient is an <image> */
Live Demo
See the mask-border shorthand property entry for a live demo.
Browser Support
CSS Masks
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 120
- 53
- No
- 106
- 15
Mobile / Tablet
- 15
- 131
- No
- 131
- 132
Notes
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.
