Mask-border-slice - CSS Property

mask-border-slice
mask-border

Summary of characteristics of the mask-border-slice property

Quick description
Defines how the image used as a mask should be partitioned.
Status
Compatibility issues ⚠
Applies to
HTML: all elements.
SVG: containers except defs, graphic elements, use.
Predefined values
fill
Percentages
Calculated relative to the dimensions of the image used as a mask.
Initial value
0
Inherited by default
No.
Animation type
Discrète: during an animation, the mask-border-slice property passes from one value to another without transition.
Canonical order
Per grammar: serialization in the order of syntax.
W3C Module
CSS Masking Module
References (W3C)
Document status: CR (Candidate Recommendation)

Syntax diagram of mask-border-slice.

mask-border-slice - Syntax DiagramSyntax diagram of the mask-border-slice CSS property. number | % number | % {1,4} {1,4} fill fillmask-border-slice:;mask-border-slice:;
Syntax diagram of the mask-border-slice property.
The links in the diagram provide more details about the values.
Download the diagram.

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

  • number is a number without a unit.
  • % is a percentage calculated based on the width or height of the element.

Description of the mask-border-slice property.

⚠
The mask-border-slice property is for now poorly recognized by browsers. Sometimes there is an equivalent property: -webkit-mask-box-slice, like on Chrome  , Edge  , or Opera  , but on Firefox   there is no equivalent.

Border masks involve hiding the border of an element using an image called the mask. It works like a regular mask, but the difference lies in how the mask is repeated.

The property mask-border-slice defines how to split the mask into nine parts, which will be used, for four of them, to cover the corners of the element, four others to cover the sides, and the central part for the center of the element. These parts don’t necessarily have to be the same size. The parts used for the sides can be stretched or repeated to cover the length or width of the element (see mask-border-repeat).

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 mask-border property
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.


You can also check out these properties that are involved in edge masks:

Short-hand property. Sets all the parameters of a mask for the edges of an element.
Specifies the image that will be used as a mask for the edges of the element.
mask-border-slice:
Defines how the image used as a mask should be partitioned.
Sets the thickness over which the edge mask operates.
Sets the possible offset of the edge mask relative to the element.
Sets the repeat mode of the mask for the edges of the element.
Defines according to which parameter the mask should act (luminance, alpha).

Values for mask-border-slice.

  • mask-border-slice: 120 110 115 130; a b c d

    From one to four numbers without units, or percentages. These numbers must be positive or zero. They represent the distance from the top edge, the right edge, the bottom, and the left edge of the mask. This divides the mask into nine parts: four for the corners, four for the edges, and the central part for the middle of the element.

    If there is only one value, it applies to all 4 sides. With two values, the first applies to the top and bottom of the mask, and the second to the right and left edges. With 3 values, the top is set by the first value, the right and left edges by the second, and the bottom by the third. Finally, with 4 values, each one applies to a different side of the mask.

    Mask slicing with border-mask-slice using a single value
    A single value.
    Mask slicing with border-mask-slice using two values
    Two values.
    Mask slicing with border-mask-slice using three values
    Three values.
    Mask slicing with border-mask-slice using four values
    Four values.

    If we're talking about percentages, they are calculated relative to the mask's width for the b and d values, and relative to the height for the other two values. So the vertical values are calculated based on the height, and the horizontal values based on the width.

  • mask-border-slice: 120 110 115 130 fill;

    This last parameter (fill) indicates how the central part should behave. If fill is specified, the central part of the mask affects the center of the element. Otherwise, the central part of the element is not displayed.

    mask-broder-slice avec le paramètre fill
    With fill.
    (simulation)
    mask-broder-slice sans le paramètre fill
    Without fill.
    (simulation)
  • mask-border-slice: initial; (0) mask-border-slice: inherit; mask-border-slice: revert; mask-border-slice: revert-layer; mask-border-slice: revert-rule; mask-border-slice: unset;

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

Animation of the mask-border-slice property.

Animations don’t work in Firefox  , and for other browsers, we used the non-standard property -webkit-mask-box-image-slice.

Mask for animation examples
Mask used for animation.

The first animation is done on the digital parameters. The second one involves the last parameter (fill). We notice that involving this parameter in an animation makes it discrete.

Image cut out with a mask
Animation of the central part

Simulator.

The mask is applied here to an element containing text. Here is the mask, the natural value for slice is 20. The central part of the mask is semi-transparent. The border of the element is 20 pixels thick.

The mask used below

mask-border-slice :
-webkit-mask-box-image-slice :
This element, which only contains text, got a sky-blue background so the edge masking effect is clearly visible.

Browsers compatibility with mask-border-slice.

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

Column 1
Support by browsers for the property mask-border-slice which defines how the border mark should be cut.

Notes:

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

1
mask-border-slice
property
Estimated overall support.
15%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

1

Opéra Mobile

1

QQ Browser

1

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

1

Opéra

1

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse

Historic of the mask-border-slice 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-slice Introduction of the property mask-border-slice, along with all those concerning border marks.
    WD
    November 15, 2012
    Working Draft.
    CR
    August 26, 2014
    Candidate Recommendation.
    PR
    REC

See also, about masking techniques.

The specification that standardizes everything about masking is called CSS Masking Module. It describes the mask-border-slice property and the properties below:

Properties:

✗
clip
Langue française
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
Langue française
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
Langue française
Sets the masking mode (alpha channel, luminance...)
mask-origin
Langue française
Sets the reference for the positioning of the mask.
mask-position
Langue française
Defines the position of the mask.
mask-position-x
Langue française
Defines the horizontal position of the mask.
mask-position-y
Langue française
Defines the vertical position of the mask.
mask-repeat
Langue française
Sets how the mask repeats when the mask is smaller than the element to be masked.
mask-size
Langue française
Fixe les dimensions du masque.
mask-type
Langue française
Defines which mask parameter is used to hide the element.