Mask-border-mode - CSS Property

Syntax diagram of mask-border-mode.

Description of the mask-border-mode property.

Edge masking is an operation that involves masking the perimeter of an element using a mask, which is often an image. This mask is divided into nine areas: four for the corners, four for the edges, and one for the center of the element.

The mask can work through its opacity (or its transparency): when it's transparent, the element is hidden, and when it's visible, the element is too. Of course, all shades are possible depending on the mask's transparency. It's also possible to create masks that work based on their luminance.

The property mask-border-mode indicates whether the mask works through its alpha channel (transparency) or its luminance.

Here are the properties that come into play in edge masks:

Values for mask-border-mode.

• mask-border-mode: alpha;

  It's the alpha channel (the mask transparency) that's used to mask or not the element.

• mask-border-mode: luminance;

  With the luminance value, it's the luminance of the mask that's used to decide whether to mask the element or not.

• mask-border-mode: initial; (alpha) mask-border-mode: inherit; mask-border-mode: revert; mask-border-mode: revert-layer; mask-border-mode: revert-rule; mask-border-mode: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the mask-border-mode property.

The animations of mask-border-mode are theoretically possible but don't work for now, as browsers still don't recognize the property.

Simulator.

The mask used to hide the element is as follows. It is cut into nine equal parts, each 20 pixels on a side, by mask-border-slice. The transparent parts of the mask show up on a blue background. The masking difference between white and black doesn't show in alpha mode. However, in luminance mode, that's what makes the difference.

Browsers compatibility with mask-border-mode.

For now, browsers don't handle the edge masking technique well enough (2026). For the mask-border-mode property, there is no equivalent, even with a vendor prefix.

Historic of the mask-border-mode property.

• CSS Masking Module Level 1

  This specification module describes two ways to partially or completely hide portions of visual elements: masking and clipping.
  Masking involves using another graphic element or an image as a mask.
  Clipping describes the visible region of visual elements. The region can be described using certain SVG graphic elements or simple shapes. Anything outside this region is not rendered.

  Regarding mask-border-mode Introduction of the mask-border-mode property in this first version of the specification.
  

  November 15, 2012

  Working Draft.

  

  August 26, 2014

  Candidate Recommendation.

  

  

See also, about masking techniques.

The specification that standardizes everything related to masking is called CSS Masking Module. The property mask-border-mode is described there, as well as the ones below:

Properties:

✗

clip

Cuts an element from a rectangle.

clip-path

Defines the visible part of the element, delimited by a geometric shape (rectangle, polygon, etc.).

clip-rule

Defines how to handle hollow shapes in the context of a clipping.

mask

A shorthand property that defines the masking parameters: mask dimensions, position, repeat, origin, etc.

mask-border

Short-hand property. Sets all the parameters of a mask for the edges of an element.

Mask-border-mode

Defines according to which parameter the mask should act (luminance, alpha).

⚠

mask-border-outset

Sets the possible offset of the edge mask relative to the element.

⚠

mask-border-repeat

Sets the repeat mode of the mask for the edges of the element.

⚠

mask-border-slice

Defines how the image used as a mask should be partitioned.

⚠

mask-border-source

Specifies the image that will be used as a mask for the edges of the element.

⚠

mask-border-width

Sets the thickness over which the edge mask operates.

mask-clip

Defines the area to be masked.

mask-composite

Defines how masks will be combined when multiple are applied to an element.

mask-image

Specifies the image or SVG file that will be used as a mask.

mask-mode

Sets the masking mode (alpha channel, luminance...)

mask-origin

Sets the reference for the positioning of the mask.

mask-position

Defines the position of the mask.

mask-position-x

Defines the horizontal position of the mask.

mask-position-y

Defines the vertical position of the mask.

mask-repeat

Sets how the mask repeats when the mask is smaller than the element to be masked.

mask-size

Fixe les dimensions du masque.

mask-type

Defines which mask parameter is used to hide the element.