Mask-border-source - CSS Property

Syntax diagram of mask-border-source.

Description of the mask-border-source property.

⚠

The mask-border-source property is still not well recognized by browsers. On browsers based on webkit, there is an equivalent property prefixed with -webkit-. That's -webkit-mask-box-source. On Firefox  , there is no equivalent.

Edge masking involves hiding the outline of an element using a mask. This mask is an image divided into 9 parts: four for the corners, four for the sides, and one for the center of the element. The parts associated with the sides stretch or repeat to cover the length or width of the element. The transparent parts of the mask hide the element, while the opaque parts keep it visible, including all the variations linked to the mask's opacity. You can also create masks that work based on their brightness.

mask-border-source defines which image to use for the mask. If the image is missing or in an unrecognized format, the mask won't apply.

If a regular mask is also applied to the element (see the mask property for this), both masks are applied in any order, and the result is the same regardless of the order.

Here are the properties that play a role in edge masks:

Values for mask-border-source.

• mask-border-source: none;

  No edge mask is applied.

• mask-border-source: url(...)

  With this syntax mask-border-source defines which image will be used as a mask. To get the expected result, it will also be necessary to set the property mask-border-slice to explain how to divide the image into nine parts.

  Indeed, the chosen image will be divided into nine parts: one for each of the four corners, one for each of the four edges, and one for the central part of the element, as shown in the drawing below.

  

• mask-border-source: initial; (none) mask-border-source: inherit; mask-border-source: revert; mask-border-source: revert-layer; mask-border-source: revert-rule; mask-border-source: unset;

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

Animation of the mask-border-source property.

The mask-border-source property can be animated in a discrete way, meaning with a sudden jump from one value to another. However, some browsers like Edge  , Chrome  , etc., chain the images with a fade. The example alternates between the two masks below.

The animation doesn't work in Firefox  , and for other browsers, we used the non-standard property -webkit-mask-box-image-source.

Browsers compatibility with mask-border-source.

Browsers still don't handle edge masking techniques well enough (2026). Firefox   in particular doesn't recognize any of the properties related to edge masking. On other browsers, you can temporarily use the -webkit-mask-box-image-source property as a replacement for mask-border-sourceLib}.

Notes:

(1) The property is not yet recognized: use -webkit-mask-box-image-source instead.

1

mask-border-source
property

Estimated overall support.

15%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

1

QQ Browser

Baidu Browser

Samsung Internet

1

Chrome

1

Edge

1

Chrome pour Androïd

1

Androïd Brower

1

Firefox pour Androïd

Safari

Safari sur IOS

Firefox

KaiOS Browser

Opéra

1

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the mask-border-source 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-source Introduction of the property mask-border-source as well as other properties related to border masking.
  

  November 15, 2012

  Working Draft.

  

  August 26, 2014

  Candidate Recommendation.

  

  

See also, about masking techniques.

The properties related to the edge mask are published in CSS Masking Module, just like the properties related to the classic masking of elements.

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.