Mask-border-repeat - CSS Property

Syntax diagram of mask-border-repeat.

Description of the mask-border-repeat property.

⚠

The property mask-border-repeat is not yet supported by browsers. However, there is a non-standard property equivalent to mask-border-repeat on almost all browsers: -webkit-mask-box-image-repeat, except on Firefox   where there is no equivalent.

Border masking involves applying a mask to the edge of the element. The mask is an image made up of nine areas: four for the corners, four for the edges, and a central part for the middle of the element. This division is done using the mask-border-slice property.

The parts related to the edges usually don't have the same dimensions as the element to be masked. The mask-border-repeat property indicates what to do in these cases: stretch, repeat, etc. Here's a mask; the dark parts are the ones that need to be enlarged or repeated to fit the size of the element. The corner parts of the mask don't need to be changed.

The areas of the mask affected
by mask-border-repeat.

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

Values for mask-border-repeat.

• mask-border-repeat: stretch;

  With the stretch value, the parts of the mask that need to be enlarged are stretched to cover the entire element.

  
  
  mask-border-repeat:stretch;
-webkit-mask-box-image-repeat:stretch;
• mask-border-repeat: repeat;

  The repeat value causes the relevant parts of the mask to repeat. There’s no scaling of the mask. You can see this in our example near the corners.

  
  
  mask-border-repeat:repeat;
-webkit-mask-box-image-repeat:repeat;
• mask-border-repeat: round;

  The round value repeats the relevant parts of the mask by adjusting their dimensions so that there is a whole number of repetitions on each edge of the element.

  
  
  mask-border-repeat:round;
-webkit-mask-box-image-repeat:round;
• mask-border-repeat: space;

  Finally, the space value repeats parts of the mask by adding spaces between these parts when the element's dimensions are not an exact multiple of the mask's dimensions. These added spaces are transparent, so the element disappears in those areas.

  
  
  mask-border-repeat:space;
-webkit-mask-box-image-repeat:space;
• mask-border-repeat: space stretch;

  You can specify two values. The first one is for the horizontal edges, and the second one for the vertical edges. However, it’s not possible to apply a different repeating mode between the top and the bottom, or between the left and the right.

  
  
  mask-border-repeat:space stretch;
-webkit-mask-box-image-repeat:space stretch;
• mask-border-repeat: initial; (stretch) mask-border-repeat: inherit; mask-border-repeat: revert; mask-border-repeat: revert-layer; mask-border-repeat: revert-rule; mask-border-repeat: unset;

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

Animation of the mask-border-repeat property.

The animation of the property mask-border-repeat is necessarily discrete: the property accepts predefined non-numeric values. Since the standard property is not yet supported by browsers, we had to use the non-standard property -webkit-mask-box-image-repeat. ⚠ Animations don’t work in Firefox.

Simulator.

For now, only the property works (and not even on Firefox  ). But in a little while, we can hope that the standard property mask-border-repeat will be functional.

Browsers compatibility with mask-border-repeat.

Browsers still don't handle the edges masking technique (2026) in a standard way. On some browsers, you can use the non-standard property instead of mask-border-repeat. On Firefox  , there is no equivalent.

Notes:

(1) These browsers do not recognize the property mask-border-repeat. Use -webkit-mask-box-image-repeat instead.

1

mask-border-repeat
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-repeat 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-repeat Introduction of the property mask-border-repeat and other properties related to border masks.
  

  November 15, 2012

  Working Draft.

  

  August 26, 2014

  Candidate Recommendation.

  

  

See also, about masking techniques.

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