mask-border
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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
mask-border =
<'mask-border-source'> ||
<'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? ||
<'mask-border-repeat'> ||
<'mask-border-mode'>
<mask-border-source> =
none |
<image>
<mask-border-slice> =
[ <number> | <percentage> ]{1,4} fill?
<mask-border-width> =
[ <length-percentage> | <number> | auto ]{1,4}
<mask-border-outset> =
[ <length> | <number> ]{1,4}
<mask-border-repeat> =
[ stretch | repeat | round | space ]{1,2}
<mask-border-mode> =
luminance |
alpha
<image> =
<url> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
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.
<div class="masked">
This element is surrounded by a bitmap-based mask border! Pretty neat, isn't
it?
</div>
.masked {
width: 200px;
background-color: lavender;
border: 18px solid salmon;
padding: 10px;
-webkit-mask-box-image: url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
30 fill / /* slice */
20px / /* width */
1px /* outset */
round; /* repeat */
mask-border:
url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
30 fill / /* slice */
20px / /* width */
1px /* outset */
round; /* repeat */
}
Specifications
Specification |
---|
CSS Masking Module Level 1 # the-mask-border |
Browser compatibility
BCD tables only load in the browser