mask-border-source

Definition

The mask-border-source property defines the source image or element used to create the mask border of an element. It is used together with the mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-slice properties to create a mask border around an element.

Examples

Using an image as the mask border source:

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

Using a CSS gradient as the mask border source:

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

Using the none keyword to remove the mask border:

div {
  mask-border-source: none;
}

Values

Best Practices

• Use the mask-border-width property to set the width of the mask border
• 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 large images as the mask border source, as they may affect the performance of the webpage.
• Keep in mind that the mask-border shorthand property can be used to set all the mask border properties at once.

Browser Compatibility