mask-border-width

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.

Syntax

/* 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.

  • When one value is specified, it applies the same width to all four sides.
  • When two values are specified, the first width applies to the top and bottom, the second to the left and right.
  • When three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom.
  • When four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise).

Values

<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.

Formal syntax

[ <length-percentage> | <number> | auto ]{1,4}

where
<length-percentage> = <length> | <percentage>

Specifications

Specification Status Comment
CSS Masking Module Level 1
The definition of 'mask-border-width' in that specification.
Candidate Recommendation Initial definition

Initial valueauto
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Inheritedno
Percentagesrelative to width/height of the mask border image area
Mediavisual
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typediscrete
Canonical orderper grammar

Browser compatibility

TBD