1. css
  2. /properties
  3. /mask-border-width

mask-border-width

Definition

The mask-border-width property sets the width of the mask border of an element. The mask border is created using the combination of mask-border-source, mask-border-repeat, mask-border-slice, and mask-border-outset. The mask-border-width property can be set using either a single value or multiple values.

Examples

Setting the mask border width using a single value:

div {
  mask-border-source: url(border.png);
  mask-border-width: 10px;
  mask-border-repeat: round;
  mask-border-slice: 20%;
  mask-border-outset: 5px;
}

Setting the mask border width using multiple values:

div {
  mask-border-source: linear-gradient(to right, red, blue);
  mask-border-width: 10px 20px 10px 20px;
  mask-border-repeat: space;
  mask-border-slice: 50% 50% 0% 0%;
}

Inheriting the mask border width from the parent element:

div {
  mask-border-width: inherit;
}

Values

ValueDescription
<length>Specifies the width of the mask border as a length value (e.g. 10px).
<percentage>Specifies the width of the mask border as a percentage of the width of the containing block (e.g. 50%).
thinEquivalent to 1px.
mediumEquivalent to 3px.
thickEquivalent to 5px.
inheritInherits the mask border width from the parent element.

Best Practices

  • Use the mask-border-source property to set the source image or element used to create the mask border before setting the mask-border-width property.
  • Experiment with different values for the mask-border-repeat property to achieve the desired effect for the mask border.
  • Use the mask-border-outset property to add an outward offset to the mask border, which can create a 3D effect.
  • Avoid using very thick mask borders, as they may look visually heavy and overpower other design elements.
  • Keep in mind that the mask-border shorthand property can be used to set all the mask border properties at once.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoNoYes