The mask-border-source CSS property sets the source image used to create an element's mask border.

The mask-border-slice property is used to divide the source image into regions, which are then dynamically applied to the final mask border.


/* Keyword value */
mask-border-source: none;

/* <image> values */
mask-border-source: url(image.jpg);
mask-border-source: linear-gradient(to top, red, yellow);

/* Global values */
mask-border-source: inherit;
mask-border-source: initial;
mask-border-source: revert;
mask-border-source: revert-layer;
mask-border-source: unset;



No mask border is used.


Image reference to use for the mask border.

Formal definition

Initial valuenone
Applies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Computed valueas specified, but with url() values made absolute
Animation typediscrete

Formal syntax

mask-border-source = 
none |

<image> =
<url> |

<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )


Basic usage

This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the source of the border mask.

mask-border-source: url(image.jpg);

Chromium-based browsers support an outdated version of this property — mask-box-image-source — with a prefix:

-webkit-mask-box-image-source: url(image.jpg);

Note: The mask-border page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.


CSS Masking Module Level 1
# the-mask-border-source

Browser compatibility

BCD tables only load in the browser

See also