The mask-border-width
CSS property sets the width of an element's mask border.
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; /* top and bottom | left and right */ mask-border-width: 2em 3em; /* top | left and right | 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: revert; mask-border-width: revert-layer; 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>
The width of the mask border, specified as a <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>
The width of the mask border, specified as a multiple of the corresponding border-width
. Must not be negative.
auto
The width of the mask border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding mask-border-slice
. If the image does not have the required intrinsic dimension, the corresponding border-width
is used instead.
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 |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | discrete |
This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to mask-border-slice
will cause the slices to be scaled to fit the border mask.
mask-border-width: 30 fill;
Chromium-based browsers support an outdated version of this property — mask-box-image-width
— with a prefix:
-webkit-mask-box-image-width: 20px;
Note: The mask-border
page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
Specification |
---|
CSS Masking Module Level 1 # the-mask-border-width |
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-width |
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-width