Limited support Useful when mask-border adds emphasis or visual refinement without becoming necessary for understanding content.

mask-border

The mask-border CSS shorthand property lets you create a mask along the edge of an element's border.

Effects

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
mask-border
1
79
17.2
18
17.2
Other
css.properties.mask-border-outset

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
css.properties.mask-border-repeat

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
css.properties.mask-border-slice

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
css.properties.mask-border-source

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
css.properties.mask-border-width

The mask-border-width CSS property sets the width of an element's mask border.
1
79
17.2
18
17.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image (3.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image (2)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image-outset (3.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image-outset (2)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image-repeat (3.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image-repeat (2)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image-slice (3.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image-slice (2)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image-source (3.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image-source (2)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image-width (3.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-mask-box-image-width (2)

Syntax

CSS 
.frame {
  mask-border-source: url('border-mask.svg');
  mask-border-slice: 30;
  mask-border-width: 20px;
  mask-border-repeat: round;
}

Live demo

Gradientframe

CSS Gradientframe demo.

PreviewFullscreen

wavy linepattern

CSS wavy linepattern demo.

PreviewFullscreen

dtframe

CSS dtframe demo.

PreviewFullscreen

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