CSS mask-border-outset Property

Description

The mask-border-outset property controls how far the pieces of a mask border image are positioned relative to the element’s border box, effectively shifting the mask-border region outward or inward from the border edge. It changes the placement of the mask’s edge slices so the decorative mask-border can visually extend beyond the border area or be pulled closer to the element’s interior without altering the element’s actual border-box dimensions. Because it affects only the mask image placement, using this property changes how the element is visually masked, not the element’s layout metrics (it does not change computed border, padding, margin, or affect reflow).

In practical terms, mask-border-outset is used together with the other mask-border properties to fine-tune how a mask-border image frames an element. It works in concert with mask-border-width and mask-border-slice (which define the thickness and the nine-slice regions of the mask image) and with mask-border-repeat (which controls how the border segments are tiled or stretched). By adjusting the outset, designers can ensure decorative corners and edges align correctly with varying border widths or create effects where the mask frame appears to hover outside the element.

Because the mask is applied as a compositing mask to the element’s painting, changing the outset can alter which parts of the element (background, border, and content) are revealed or concealed. Be mindful that if mask areas extend beyond the element’s border box, those parts may be subject to clipping by ancestor overflow rules or interact with stacking and pointer-event behavior in ways that differ from a simple border image. For cases where a similar visual effect is desired for the element border itself rather than the mask, authors often compare and coordinate with border-image-outset to achieve consistent framing between masking and border imagery.

Definition

Initial value: 0
Applies to: all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inherited: no
Computed value: as specified, but with relative lengths converted into absolute lengths
Animatable: yes
JavaScript syntax: object.style.maskBorderOffset

Syntax

mask-border-offset: <length> | auto;

Values

<length>Any valid CSS length unit (e.g., px, em, rem). Negative values are allowed, which draws the mask inside the border box.
autoThe default value. The offset is automatically calculated based on the mask-border sizing and the element’s box.

Example

HTML

<div class="container">

  <h2 class="title">mask-border-outset example</h2>



  <div class="row">

    <div class="box outset0">

      <span class="label">mask-border-outset: 0px</span>

    </div>



    <div class="box outset20">

      <span class="label">mask-border-outset: 20px</span>

    </div>

  </div>



  <p class="note">Both boxes use the same SVG mask; the second extends the mask border outward using mask-border-outset.</p>

</div>

CSS

/* Layout */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: #f3f5f9; color: #111; }
.container {
  max-width: 860px;
  margin: 48px auto;
  padding: 24px;
}
.title {
  margin: 0 0 18px 0;
  font-size: 18px;
  font-weight: 600;
}
.row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.note {
  margin-top: 16px;
  color: #475569;
  font-size: 13px;
}

/* Shared mask image embedded as an inline SVG data URL. The SVG draws a stroked rounded rectangle
   so the visible part of the element becomes a decorative rounded frame. */
:root {
  --mask-svg: url('data:image/svg+xml;utf8,');
}

.box {
  width: 220px;
  height: 140px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 14px; /* visual rounding for the element box itself */
  background: linear-gradient(135deg, #6ee7b7 0%, #3b82f6 100%);
  color: white;
  font-weight: 700;
  letter-spacing: 0.2px;
  -webkit-mask-repeat: stretch; /* older WebKit prefixed properties */
  -webkit-mask-origin: border-box;
  mask-origin: border-box;
  mask-repeat: stretch;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

/* Apply the SVG as a mask border and configure the slicing/width. */
.box {
  -webkit-mask-border-source: var(--mask-svg);
  mask-border-source: var(--mask-svg);

  /* Tell the browser how to slice the SVG for the border regions. */
  -webkit-mask-border-slice: 30 fill;
  mask-border-slice: 30 fill;

  /* Thickness of the mask border drawn against the element. */
  -webkit-mask-border-width: 20px;
  mask-border-width: 20px;

  /* The key property demonstrated below (default 0). */
  -webkit-mask-border-outset: 0px;
  mask-border-outset: 0px;

  -webkit-mask-border-repeat: stretch;
  mask-border-repeat: stretch;
}

/* Label styling */
.label {
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
  font-size: 13px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
}

/* Variant that extends the mask border outward by 20px. */
.outset20 {
  -webkit-mask-border-outset: 20px;
  mask-border-outset: 20px;
}

/* Slightly different background so the difference is visible */
.outset0 { background: linear-gradient(45deg, #60a5fa 0%, #8b5cf6 100%); }
.outset20 { background: linear-gradient(45deg, #34d399 0%, #06b6d4 100%); }

/* Make the demo responsive on narrow screens */
@media (max-width: 520px) {
  .row { flex-direction: column; }
}

Result

Editor

Browser Support

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