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

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