Mask-border - CSS Property

Description of the mask-border property.

⚠

All properties related to edge masking are poorly recognized by current browsers (2026). On Firefox   it's completely impossible for now. On browsers using webkit, we've used the equivalent properties starting with -webkit-mask-box to make the examples work.

The property mask-border is a shorthand property that defines all the border masking settings.

The difference between edges masking and classic masking (see the mask property) lies in how the mask adapts to the dimensions of the element being masked: with classic masking, you can only repeat or stretch the mask to cover the entire element. Edge masking is trickier: only the parts of the mask linked to the sides of the element are stretched or repeated to fit the element's length or width.
mask-border lets you set a mask for each corner, one for each side, and one for the inside of the element.

All these mask parts are grouped into a single image, divided into 9 parts, not necessarily of the same size.

Mask for the
top left corner.

Mask for
the top edge.

Mask for the
top right corner.

Mask for the
left edge.

Mask for the
right edge.

Mask for the
bottom left corner.

Mask for the
bottom edge

Mask for the
bottom right corner.

The central part is the mask for the inside of the element.

The edge masks don't follow the corner curves.

Here's how to draw a petit beurre (a small cookie from Nantes). We cheated a little: we added shading to make it look more realistic. It's a simulation so that even Firefox   users can see the result.

The original element.

the mask (90 pixels on each side).

The result.
(simulation)

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

Values for mask-border.

• mask-border: none;

  No edge mask is applied.

• mask-border: <source> <slice> / <width> / <outset> <repeat> <mode>;

  The shorthand property accepts all the detailed property values it groups together. The preferred order is shown above, but it doesn't really matter. However, the / characters are required before width and outset.
  Values not mentioned are reset to their initial value.

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

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Examples with the mask-border property.

These examples don't work on Firefox  .

Create the cutting teeth of a French stamp.

Here’s how to get a French postage stamp from an image. This one has regular edges as shown in the first example. By applying an edge mask, the perforations appear.

The original image, with smooth edges.

The image with the mask that cuts out the edges.

Make a photo look old with mask-border.

Old photos often have uneven edges, caused by the cutting tools at the photographer's and the fact that the paper doesn't cut well. They also have a yellowish tint called sepia.

The modern image, with smooth edges, and in color.

The image with the mask that cuts the edges and a sepia effect (for the phone, CSS can’t do anything).

Animation of the mask-border property.

The mask-border property can be animated. Check out the individual properties for examples.

Browsers compatibility with mask-border.

For now, browsers don't handle edge masking techniques well enough (2026). Firefox   in particular is lagging behind. On other browsers, you can use the -webkit-mask-box-image property instead of mask-border.

Notes:

(1) Uses the non-standard -webkit-mask-box-image property.

1

mask-border
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 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 Introduction of image masking techniques. And first definition of the corresponding properties including the mask-border property.
  

  November 15, 2012

  Working Draft.

  

  August 26, 2014

  Candidate Recommendation.

  

  

See also, about masking techniques.

The specification that standardizes everything about masking is called CSS Masking Module. It describes the mask-border property and the properties 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.