This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The mask-border
CSS property lets you create a mask along the edge of an element's border.
This property is a shorthand for mask-border-source
, mask-border-slice
, mask-border-width
, mask-border-outset
, mask-border-repeat
, and mask-border-mode
. As with all shorthand properties, any omitted sub-values will be set to their initial value.
/* 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;
<'mask-border-source'>
mask-border-source
.<'mask-border-slice'>
mask-border-slice
.<'mask-border-width'>
mask-border-width
.<'mask-border-outset'>
mask-border-outset
.<'mask-border-repeat'>
mask-border-repeat
.<'mask-border-mode'>
mask-border-mode
.<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>
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:
<div id="bitmap">This element is surrounded by a bitmap-based mask border! Pretty neat, isn't it?</div>
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; mask-border: url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png") /* source */ 30 / /* slice */ 36px 18px /* width */ round; /* repeat */ }
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The definition of 'mask-border' in that specification. | Candidate Recommendation | Initial 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:
|
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | per grammar |
Creates stacking context | yes |
TBD
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border