1. css
  2. /properties
  3. /mask-border-mode

mask-border-mode

Overview

The mask-border-mode property, part of the CSS Masking Module Level 1, prescribes how an image assigned by mask-border-source should be treated - as an alpha or a luminance mask.

However, no browsers have implemented this property yet, and its practical application remains mostly theoretical. Also, it's worth noting that mask-border, a shorthand property, encompasses mask-border-mode along with other mask border properties.

Examples and Usage

For illustrative purposes, the following example showcases the specification of the mask-border-mode property.

.example-element {
    mask-border-source: url(mask.png);
    mask-border-mode: alpha;
    /* additional mask border properties */
}

In this theoretical scenario, an image from "mask.png" is used as a mask border source. The mask-border-mode is set to alpha, suggesting the alpha values of the mask border image would be used as the mask values.

Values

ValueDescription
luminanceThe mask border image's luminance values serve as the mask values.
alphaThe mask border image's alpha values serve as the mask values.

Associated Properties

  • mask-border
  • mask-border-outset
  • mask-border-repeat
  • mask-border-source
  • mask-border-width

Tips and Tricks

  • Despite the lack of support for mask-border-mode, it's a good practice to stay updated on the evolving CSS standards and properties. Frequently revisiting the W3C's working drafts can provide insights into the progression of new CSS properties and their potential use cases.

  • Another way to achieve graphical effects is through the use of CSS Clipping and CSS Filters. Clipping restricts the region of an element that is visible, whereas Filters apply graphical effects like blurring or color shifting to an element.

  • The term "mask" in this context refers to a way of selectively hiding or revealing parts of an element. The alpha or luminance values from the mask-border-source image are used to determine the visibility of the corresponding parts of the element.

  • The term blending mode refers to the way two layers are blended together. In the context of mask-border-mode, it determines whether the mask is based on the alpha (transparency) or luminance (brightness) values of the mask-border-source image.

  • Alpha blending is one of the most common types of blending, where the transparency of the image plays a crucial role in determining the final appearance. For instance, parts of the element corresponding to fully transparent parts of the mask-border-source image will be completely invisible, and vice versa.

  • Luminance blending, on the other hand, utilizes the brightness of the image. Darker parts of the mask-border-source image will correspond to less visible parts of the element, and lighter parts to more visible ones.

Browser Compatibility

At the time of writing (June 2023), no known browsers support the mask-border-mode property. Despite the CSS Masking Module Level 1 defining this and other related properties, their implementation in browsers remains limited and inconsistent.

In addition, for a broader perspective on CSS Masking support, refer to the first link in the Useful Resources section below.

Useful Resources

Can I use: CSS Masks

W3C's Editor's Draft of CSS Masking Module Level 1: mask-border-mode

W3C's Candidate Recommendation Draft of CSS Masking Module Level 1