CSS Reference Property

mask-border-source

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 image entry 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
  • 122
  • No
  • 122
  • 123

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

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.

Further Reading

Written by . Last updated December 11, 2016 at 9:26 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.