mask-border
The mask-border CSS property sets how the edges of an element are masked. It is a shorthand for mask-border-outset, mask-border-repeat, mask-border-slice, mask-border-source, and mask-border-width.
Overview
The mask-border CSS property sets how the edges of an element are masked. It is a shorthand for mask-border-outset, mask-border-repeat, mask-border-slice, mask-border-source, and mask-border-width.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 79 | | 17.2 | 18 | 17.2 | |
| Other | ||||||
| The mask-border-outset CSS property specifies the distance by which an element's mask border is set out from its border box. | 1 | 79 | | 17.2 | 18 | 17.2 |
| The mask-border-repeat CSS property specifies how the images for the sides and the middle part of the mask border image are scaled and tiled. | 1 | 79 | | 17.2 | 18 | 17.2 |
| The mask-border-slice CSS property divides the image set by mask-border-source into regions. These regions are used to form the components of an element's mask border. | 1 | 79 | | 17.2 | 18 | 17.2 |
| The mask-border-source CSS property sets the source image used to create an element's mask border. | 1 | 79 | | 17.2 | 18 | 17.2 |
| The mask-border-width CSS property sets the width of an element's mask border. | 1 | 79 | | 17.2 | 18 | 17.2 |
- Previously available under a different name: -webkit-mask-box-image (3.1)
- Previously available under a different name: -webkit-mask-box-image (2)
- Previously available under a different name: -webkit-mask-box-image-outset (3.1)
- Previously available under a different name: -webkit-mask-box-image-outset (2)
- Previously available under a different name: -webkit-mask-box-image-repeat (3.1)
- Previously available under a different name: -webkit-mask-box-image-repeat (2)
- Previously available under a different name: -webkit-mask-box-image-slice (3.1)
- Previously available under a different name: -webkit-mask-box-image-slice (2)
- Previously available under a different name: -webkit-mask-box-image-source (3.1)
- Previously available under a different name: -webkit-mask-box-image-source (2)
- Previously available under a different name: -webkit-mask-box-image-width (3.1)
- Previously available under a different name: -webkit-mask-box-image-width (2)
Syntax
.frame {
mask-border-source: url('border-mask.svg');
mask-border-slice: 30;
mask-border-width: 20px;
mask-border-repeat: round;
}Live demo
Use cases
Decorative enhancement
Use mask-border to add depth, masking, blending, or special treatment to supporting visuals.
Brand expression
Apply effects where the interface benefits from stronger visual identity but still works in simpler environments.
Cautions
- Heavy effects can hurt performance or readability on lower-end devices.
- Do not use visual effects as the only way to communicate meaning or state.
Accessibility
- Maintain text contrast and focus visibility when applying overlays, filters, or blend effects.
- Visual polish should never reduce content legibility.
Related links
Powered by web-features