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

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

ValueDescription
mask-border-sourceSpecifies the image or SVG element to use as the mask border
mask-border-sliceSpecifies how to slice the mask border image
mask-border-widthSpecifies the width of the mask border
mask-border-outsetSpecifies how much the mask border image should be outset
mask-border-repeatSpecifies how the mask border image should be repeated

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
PartialYesPartialNoYesNo