CSS mask-border Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The mask-border property lets you use an image (raster or vector) as a mask specifically for an element’s border area, controlling the border’s visibility and transparency rather than painting a graphic around the box. Conceptually it works like a nine-slice approach: the mask image is divided into corners, edges, and a center so corners can be preserved while edges and the center are scaled or repeated. Because it functions as a mask, the image’s alpha (or vector transparency) determines what parts of the border are visible - fully opaque parts of the mask reveal the border, fully transparent parts hide it, and semi‑transparent areas produce partially visible, feathered border effects.

In practice mask-border complements the general masking system and elements’ visual shaping. It can be combined with the element’s overall mask (masks are composited together so multiple masks further modulate visibility) and it shares the same nine-slice semantics familiar from border-image, but with the goal of masking (making parts invisible) rather than drawing pixels. It also respects and interacts with other shape and painting properties: for example, rounded corners from border-radius affect the final masked region, and the relationship between border and background layers (influenced by background-clip) determines which painted areas are revealed when the mask hides border portions.

Designers use mask-border for decorative, non-rectangular, or softly fading edges that need to scale with their containers - think ornate frame effects, feathered outlines, or complex SVG edge masks that preserve corner integrity while allowing flexible edges. Because masks only alter visual rendering and not layout, the element’s box model and flow remain unchanged; if you need the interaction region to match the visible shape you’ll need an additional approach (for example clipping or pointer-event adjustments). From a performance standpoint, simpler vector masks or modestly sized images are more efficient than very large bitmaps, and animating mask properties should be done with care to avoid forcing expensive repaints.

Definition

Initial value: See individual properties
Applies to: all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.maskBorder

Syntax

mask-border: <mask-border-source> || <mask-border-slice> [ / <mask-border-width>? ]? [ / <mask-border-outset>? ]? [ repeat-style ]?;

Values

<mask-border-source>See mask-border-source CSS property for values.
<mask-border-slice>See mask-border-slice CSS property for values.
<mask-border-width>See mask-border-width CSS property for values.
<mask-border-outset>See mask-border-outset CSS property for values.
<mask-border-repeat>See mask-border-repeat CSS property for values.

Example

HTML

<div class='demo'>

  <div class='masked-frame'>

    <h2>Decorative mask-border</h2>

    <p>This box uses an SVG data-uri as a mask-border to create a decorative frame.</p>

    <a class='btn' href='#'>Take action</a>

  </div>

</div>

CSS

/* Layout */
:root {
  --border-size: 24;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f3f6f9;
  margin: 0;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}

.demo {
  width: 100%;
  max-width: 720px;
}

/* Mask-border demo */
.masked-frame {
  --b: var(--border-size);
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  color: #1b1b1b;
  padding: 20px 24px;
  border: calc(var(--b) * 1px) solid rgba(0,0,0,0.55);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(19,30,43,0.08);
  line-height: 1.4;
  /* SVG data URI used as the mask-border source */
  -webkit-mask-border: url('data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%20100%20100'><rect width='100' height='100' fill='black'/><rect x='14' y='14' width='72' height='72' fill='none' rx='12'/></svg>') var(--b) fill round;
  mask-border: url('data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%20100%20100'><rect width='100' height='100' fill='black'/><rect x='14' y='14' width='72' height='72' fill='none' rx='12'/></svg>') var(--b) fill round;
  -webkit-mask-repeat: round;
  mask-repeat: round;
}

.masked-frame h2 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
}

.masked-frame p {
  margin: 0 0 14px 0;
  opacity: 0.95;
}

.btn {
  display: inline-block;
  padding: 8px 14px;
  background: rgba(27,27,27,0.9);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}

/* Small screens */
@media (max-width: 420px) {
  .masked-frame {
    padding: 16px;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS mask-border property. Hover over a browser icon to see the version that first introduced support for this CSS property.