This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
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;
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-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:
[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2018/03/23/15836/c576392f16f5c75500c0d627c36e4a87/mask-border-diamonds.png]]
HTML
<div id="bitmap">This element is surrounded by a bitmap-based mask border! Pretty neat, isn't it?</div>
CSS
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 {
width: 200px;
background-color: lavender;
border: 18px solid salmon;
padding: 10px;
/* Prefixed longhand properties currently supported in Chromium
-webkit-mask-box-image-source: url(https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png);
-webkit-mask-box-image-slice: 30 fill;
-webkit-mask-box-image-width: 20px;
-webkit-mask-box-image-repeat: round;
-webkit-mask-box-image-outset: 1px;
*/
/* Prefixed shorthand property currently supported in Chromium */
-webkit-mask-box-image: url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png") /* source */
30 fill / /* slice */
20px / /* width */
1px /* outset */
round; /* repeat */
/* Updated standard shorthand property, not supported anywhere yet */
mask-border:
url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png") /* source */
30 fill / /* slice */
20px / /* width */
1px /* outset */
round; /* repeat */
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1The definition of 'mask-border' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
TBD
mask-border by Mozilla Contributors is licensed under CC-BY-SA 2.5.