The mask-border
CSS shorthand property lets you create a mask along the edge of an element's border.
mask-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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
mask-border |
1
|
79
|
No
See
bug 877294.
|
No
|
15
|
3.1
|
1
|
18
|
No
|
14
|
3
|
1.0
|
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border