The mask-border
CSS shorthand property lets you create a mask along the edge of an element's border.
The mask-border
CSS shorthand property lets you create a mask along the edge of an element's border.
This property is a shorthand for the following CSS properties:
/* 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;
<'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
.
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 |
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.
Specification |
---|
CSS Masking Module Level 1 # the-mask-border |
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 | NoSee bug 877294. |
No | 15 | 3.1 | 4.4 | 18 | NoSee bug 877294. |
14 | 3 | 1.0 |
© 2005–2023 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