This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The mask-border-width
CSS property sets the width of an element's mask border.
/* Keyword value */ mask-border-width: auto; /* <length> value */ mask-border-width: 1rem; /* <percentage> value */ mask-border-width: 25%; /* <number> value */ mask-border-width: 3; /* vertical | horizontal */ mask-border-width: 2em 3em; /* top | horizontal | bottom */ mask-border-width: 5% 15% 10%; /* top | right | bottom | left */ mask-border-width: 5% 2em 10% auto; /* Global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: unset;
The mask-border-width
property may be specified using one, two, three, or four values chosen from the list of values below.
<length-percentage>
<length>
or a <percentage>
. Percentages are relative to the width of the border area for horizontal offsets and the height of the border area for vertical offsets. Must not be negative.<number>
border-width
. Must not be negative.auto
mask-border-slice
. If the image does not have the required intrinsic dimension, the corresponding border-width
is used instead.[ <length-percentage> | <number> | auto ]{1,4}where
<length-percentage> = <length> | <percentage>
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The definition of 'mask-border-width' in that specification. | Candidate Recommendation | Initial definition |
Initial value | auto |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Percentages | relative to width/height of the mask border image area |
Media | visual |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | discrete |
Canonical order | per grammar |
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-width