The mask-border CSS shorthand property lets you create a mask along the edge of an element's border.

/* source | slice */ mask-border: url('border-mask.png') 25;  /* source | slice | repeat */ mask-border: url('border-mask.png') 25 space;  /* source | slice | width */ mask-border: url('border-mask.png') 25 / 35px;  /* source | slice | width | outset | repeat | mode */ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;  /* Global values */ mask-border: inherit; mask-border: initial; mask-border: revert; mask-border: unset; 

mask-border

The mask-border CSS shorthand property lets you create a mask along the edge of an element's border.

Constituent properties

This property is a shorthand for the following CSS properties:

mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width

Syntax

/* source | slice */ mask-border: url('border-mask.png') 25;  /* source | slice | repeat */ mask-border: url('border-mask.png') 25 space;  /* source | slice | width */ mask-border: url('border-mask.png') 25 / 35px;  /* source | slice | width | outset | repeat | mode */ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;  /* Global values */ mask-border: inherit; mask-border: initial; mask-border: revert; mask-border: unset; 

Values

<'mask-border-source'>

The source image. See mask-border-source.

<'mask-border-slice'>

The dimensions for slicing the source image into regions. Up to four values may be specified. See mask-border-slice.

<'mask-border-width'>

The width of the border mask. Up to four values may be specified. See mask-border-width.

<'mask-border-outset'>

The distance of the border mask from the element's outside edge. Up to four values may be specified. See mask-border-outset.

<'mask-border-repeat'>

Defines how the edge regions of the source image are adjusted to fit the dimensions of the border mask. Up to two values may be specified. See mask-border-repeat.

<'mask-border-mode'>

Defines whether the source image is treated as a luminance mask or alpha mask. See mask-border-mode.

Formal definition

Initial value	as each of the properties of the shorthand:mask-border-mode: alphamask-border-outset: 0mask-border-repeat: stretchmask-border-slice: 0mask-border-source: nonemask-border-width: auto
Applies to	all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Inherited	no
Percentages	as each of the properties of the shorthand:mask-border-slice: refer to size of the mask border imagemask-border-width: relative to width/height of the mask border image area
Computed value	as each of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specified, but with relative lengths converted into absolute lengthsmask-border-repeat: as specifiedmask-border-slice: as specifiedmask-border-source: as specified, but with url() values made absolutemask-border-width: as specified, but with relative lengths converted into absolute lengths
Animation type	as each of the properties of the shorthand:mask-border-mode: discretemask-border-outset: discretemask-border-repeat: discretemask-border-slice: discretemask-border-source: discretemask-border-width: discrete
Creates stacking context	yes

Formal syntax

<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>

Examples

Setting a bitmap-based mask border

In this example, we will mask an element's border with a diamond pattern. The source for the mask is a ".png" file of 90 by 90 pixels, with three diamonds going vertically and horizontally:

To match the size of a single diamond, we will use a value of 90 divided by 3, or 30, for slicing the image into corner and edge regions. A repeat value of round will make the mask slices fit evenly, i.e., without clipping or gaps.

Specifications

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

See also

mask-border-mode mask-border-outset mask-border-repeat mask-border-source mask-border-width

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)Français日本語中文 (简体) Change language