mask-border

Definition

The mask-border property allows you to create a mask by defining a border around an element. This is particularly useful when combined with the mask-image property to create complex masks for images or other elements. The mask-border property is a shorthand for mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, and mask-border-repeat.

Examples

Using mask-border to create a circular mask:

.my-element {
  -webkit-mask-border: circle(50%);
  mask-border: circle(50%);
}

Using mask-border to create a border with an image mask:

.my-element {
  -webkit-mask-border: url(mask.png) 10 / 20px repeat;
  mask-border: url(mask.png) 10 / 20px repeat;
}

Using mask-border to create a border with an image mask and outset:

.my-element {
  -webkit-mask-border: url(mask.png) 10 / 20px repeat outset;
  mask-border: url(mask.png) 10 / 20px repeat outset;
}

Values

Best Practices

• Use vendor prefixes for maximum browser compatibility, since this property is not fully supported in all browsers yet.
• Be careful when using image masks with mask-border, since the image may not look correct when sliced or repeated. Consider using a solid color instead.
• Keep in mind that the mask-border property may not be supported in older versions of some browsers, so it's important to test your code in different environments.
• Consider using the border-radius property instead of mask-border if you don't need to use an image mask.
• When using an image mask, make sure the image is the same size as the element you're applying the mask to.

Browser Compatibility