CSS mask-border-slice Property

Description

The mask-border-slice property controls how the image used for a mask border is divided into regions that supply the visual (alpha) parts used to form an element’s masked border. It defines inward offsets from the image edges that create the four corner pieces, four edge strips, and the central area. Those slices determine which parts of the source image become the corners and edges of the mask and therefore how the mask will be mapped onto the element’s box.

Slicing affects more than just which pixels are used - it influences how those pixels are treated when the mask is applied. Corners are typically preserved as discrete pieces while edge strips are candidates for stretching or tiling along the corresponding sides; the center region can either contribute to filling the interior or be effectively ignored depending on the mask fill behavior. This behavior is conceptually similar to how border-image-slice divides border images for drawing decorative borders, but in this case the divided parts form an alpha mask that shapes transparency and hit-testing rather than painting color.

mask-border-slice is normally used together with the other mask-border-related settings so that the chosen slices map correctly to the supplied image and the desired repeat/stretch behavior. The overall result depends on the image source and how the mask is composed, so it’s helpful to think of slices as a way to say “which parts of the image are corners, which are edges, and which is the center” while leaving the actual image selection and compositing to the companion properties such as mask-border and the more general masking image controls like mask-image. Changing the slice values can therefore dramatically change the appearance and interactive clipping of the masked element without altering the source image itself.

In practical terms, designers use mask-border-slice to preserve decorative corner art from distortion, to control which parts of a mask repeat along edges, and to decide whether the central part of a mask should act as a filled interior. Because the property only governs the geometry of the split, the final visual effect is the combination of the slices, the mask image content, and the neighboring mask-border properties that specify source, repeat, and compositing behavior.

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
Animatable: yes
JavaScript syntax: object.style.maskBorderSlice

Syntax

mask-border-slice: <number-percentage>{1,4} [fill];

Values

<number-percentage>{1,4}
Specifies 1 to 4 values that define the inward offsets from the sides of the mask image. These can be numbers (pixels, etc.) or percentages of the image’s dimensions.
- 1 value: Applies to all four sides.
- 2 values: First value → top & bottom, second value → left & right.
- 3 values: Top, left & right, bottom.
- 4 values: Top, right, bottom, left.
[fill]Indicates whether the middle section of the mask should be scaled and used to fill the content box. If fill is specified, the center portion of the sliced mask is applied inside the element; otherwise, only the borders use the mask.

Example

HTML

<div class='demo'>

  <div class='card'>

    <h1>Masked Border Card</h1>

    <p>This card uses an SVG border mask and mask-border-slice to keep a transparent center.</p>

    <button>Learn more</button>

  </div>

</div>

CSS

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #eef2ff, #ffffff);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.demo {
  padding: 20px;
}

.card {
  width: 340px;
  padding: 24px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  color: #0b1220;
  box-shadow: 0 8px 24px rgba(11,18,32,0.12);
  border-radius: 12px; /* fallback */

  /* Mask border source (SVG data URI) */
  -webkit-mask-border-source: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22black%22%20rx%3D%2212%22%20ry%3D%2212%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22white%22%20fill-opacity%3D%220%22%20rx%3D%228%22%20ry%3D%228%22%2F%3E%3C%2Fsvg%3E');
  mask-border-source: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22black%22%20rx%3D%2212%22%20ry%3D%2212%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22white%22%20fill-opacity%3D%220%22%20rx%3D%228%22%20ry%3D%228%22%2F%3E%3C%2Fsvg%3E');

  /* Slice controls how the SVG is divided into a 9-patch (corners/edges/center) */
  -webkit-mask-border-slice: 30 fill;
  mask-border-slice: 30 fill;

  -webkit-mask-border-repeat: round;
  mask-border-repeat: round;

  -webkit-mask-border-width: 16px;
  mask-border-width: 16px;

  padding: 32px;
}

.card h1 {
  margin: 0 0 8px 0;
  font-size: 20px;
}

.card p {
  margin: 0 0 16px 0;
  color: #334;
  font-size: 14px;
  line-height: 1.4;
}

.card button {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

Result

Editor

Browser Support

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