mask-border

A shorthand property that lets you use an image as a 'border mask' for an element. This allows you to create decorative borders that are defined by an external image file.

Quick example

.decorative-box {
  mask-border: url('border.png') 30 fill stretch;
  /* applies a custom image-based border to the element */
}

Quick facts

Initial value
See individual properties
Inherited
No
Applies to
all elements and SVG container elements

Values

mask-border-mode

mask-border Browser Support

Limited availability92% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

17.2+
ESC