Mask-border-width - CSS Property

Syntax diagram of mask-border-width.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• length is a numeric value followed by one of CSS dimension units.
• % is a percentage calculated based on the width or height of the element.
• number is a number without a unit.

Description of the mask-border-width property.

⚠

Edge masking is poorly supported by browsers. Sometimes there's an equivalent property to mask-border-width: -webkit-mask-box-image-width, but on Firefox   there’s no equivalent.

Edge masking is an operation that involves hiding the outline of an element using a mask, which is most often a png image. This image is divided into nine areas: four for the corners, four for the sides, and one for the center of the element (see mask-border-slice).
Where the mask is transparent, the element is hidden; where it’s opaque, the element is visible. Of course, a semi-transparent mask gives medium visibility. It’s also possible to process masks based on their luminance.

The property mask-border-width indicates the thickness of the area where the mask pattern will be applied. If mask-border-slice gives a smaller dimension than mask-border-width, the relevant mask area is expanded. It's reduced otherwise.

The value of mask-border-width can possibly be calculated based on the thickness of the element's border.

mask-border-width:20px;
(simulation)

mask-border-width:30px;
(simulation)

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

Values for mask-border-width.

• mask-border-width: auto;

  With auto, the mask's application area automatically adjusts to the size of the mask defined by mask-border-slice.

• mask-border-width: 8px 5px 8px 20px; a b c d

  The area applies the mask at the exact indicated thickness. The mask expands or contracts to fit.

  From one to four values can be indicated with the following correspondence:

  • A single value, it applies to all sides.
  • Two values, the first applies to the horizontal edges, the second to the vertical edges.
  • Three values: the first value applies to the top edge, the second to the right and left edges, and the last to the bottom..
  • Four values: they are applied successively to the four sides, starting from the top and going clockwise..
  
  A single value.

  
  Two values.

  
  Three values.

  
  Four values.

  If these are percentages, they are calculated relative to the element's width for the values b and d, and relative to the height for the values a and c. Makes sense, but it creates a weird effect: the element's width affects the vertical edges, while the height affects the horizontal edges.

  On this element mask-border-width is 10%. The calculation relative to the width is curiously visible on the vertical edges of the element.
• mask-border-width: 1 2 2 1;

  From one to four numbers without units indicate the ratio between the thickness of the mask action area and the border. The correspondences depending on the number of values are the same as before.

• mask-border-width: initial; (auto) mask-border-width: inherit; mask-border-width: revert; mask-border-width: revert-layer; mask-border-width: revert-rule; mask-border-width: unset;

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

Animation of the mask-border-width property.

Animations don't work in Firefox  , and for other browsers, we used the non-standard property -webkit-mask-box-image-width. But with these precautions, it's possible to animate the mask-border-width property. The animation happens continuously.

Simulator.

The mask used is this one. It is cut by mask-border-slice into nine parts of 20 pixels each. The element's border is 1 pixel thick, in case you want to test the syntax with numbers without units.

─ 60px ─

│
60px
│

Browsers compatibility with mask-border-width.

For now, browsers don't handle edge masking technique well enough (2026). On some browsers, you can use the non-standard property -webkit-mask-box-image-width instead of mask-border-width. On Firefox  , there is no equivalent.

Notes:

(1) Unrecognized property. Instead, use the non-standard property -webkit-mask-box-image-width.

1

mask-border-widthproperty

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-width 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-width Introduction of the property mask-border-width and all properties related to masking elements.
  

  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-width 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.