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:
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: revert-layer;
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:
|
|---|---|
| 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:
|
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
| Creates stacking context | yes |
Formal syntax
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 |
Browser compatibility
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
mask-border | |||||||||||