Mask-border-outset - CSS Property

Syntax diagram of mask-border-outset.

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.
• number is a number without a unit.

Description of the mask-border-outset property.

⚠

Edge masking isn’t fully supported by browsers yet. However, there’s a non-standard property equivalent to mask-border-outset on almost all browsers: -webkit-mask-box-image-outset. On Firefox  , there’s no equivalent.

Edge masking involves hiding the edges of an element using a mask, which is an image divided into nine areas: four for the corners, four for the sides, and one for the center of the element. This division is done by mask-border-slice.

The property mask-border-outset shows how much the mask should be shifted outside the edge of the element. The part of the mask that sticks out because of this shift gets cut off.

mask-border-outset:0
(simulation)

mask-border-outset:10px
(simulation)

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

Values for mask-border-outset.

⚠ The examples don't work on Firefox  .

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

  From one to four positive or zero values, followed by a unit of measurement. The mask is shifted according to the given values. Depending on the number of values, we have the following correspondence:

  • A single value: it indicates the offset from each side.
  • Two values: the first refers to the offset from the horizontal edges, the second to the offset from the vertical edges.
  • Three values: the first value is the offset from the top edge, the second from the left and right edges, and the last from the bottom.
  • Four values: they apply successively to the offsets on the four sides starting from the top, and going clockwise.
  
  A single value.

  
  Two values.

  
  Three values.

  
  Four values.

  
  Here's what it looks like in an example. The masking pattern is this one; it measures 60 pixels on each side and is divided by mask-border-slice into nine squares of 20 pixels each. At the top and bottom, the pattern is fully visible (outset = 0). On the left and right, you only see half of it (outset = 10 pixels).

  ─ 60px ─

  │
  60px
  │

  
  Example
  border:20px solid gray;
mask-box-outset:0px 10px;
-webkit-mask-box-image-outset:0px 10px;
• mask-border-outset: 1 2 2 1;

  Four numbers without units indicate the ratio between the offset and the border thickness. The matches depending on the number of values are the same as before.

  
  In the example, the border has a thickness of 20 pixels. By applying the value 0.5 to mask-border-outset, the pattern is shifted 10 pixels outward, so it’s only half visible. The pattern is the same as in the previous example.

  Example
  border:20px solid gray;
mask-box-outset:0 0.5;
-webkit-mask-box-image-outset:0 0.5;
• mask-border-outset: initial; (0) mask-border-outset: inherit; mask-border-outset: revert; mask-border-outset: revert-layer; mask-border-outset: revert-rule; mask-border-outset: unset;

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

Animation of the mask-border-outset property.

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

Simulator.

The image used to mask the edges of the element is as follows. It is divided by mask-border-slice into nine squares of 20 pixels each.

60px

60px

Browsers compatibility with mask-border-outset.

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

Notes:

(1) These browsers do not support the property mask-border-outset. Use the non-standard property -webkit-mask-box-image-outset instead.

1

mask-border-outset
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-outset 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-outset Presentation of masking techniques for elements and first introduction of the property mask-border-outset.
  

  November 15, 2012

  Working Draft.

  

  August 26, 2014

  Candidate Recommendation.

  

  

See also, about masking techniques.

The specification that standardizes everything regarding masking or border masking is called CSS Masking Module. The property mask-border-outset 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.