CSS mask-border-repeat Property

Description

The mask-border-repeat property controls how the pieces produced by slicing a mask border image are laid out along an element’s border area. When a border mask image is divided into regions (corners and edges) the property determines the treatment of those edge regions as they are applied around the element — whether they are tiled, scaled, or otherwise fitted to fill the available border thickness and edge lengths. This behavior is limited to the border mask regions and does not alter the center region of the mask or the element’s main content mask.

In practice this property works together with the source and slicing that define the border mask: the image provided by mask-border-source is divided into corner and edge segments, and the repeat behavior governs how the edge segments fill the space between corners. Corners are preserved as discrete pieces, while edge segments are manipulated to cover varying border widths and edge lengths. Because the edge segments may be repeated or scaled to match the element’s geometry, you can see visual differences such as seams, scaling artifacts, or repetition patterns depending on the chosen fitting behavior and on the mask graphic itself.

From the rendering and compositing perspective, mask-border-repeat only influences how the border mask image is painted before it is applied as an alpha mask to the element; it does not change how the masked result is blended with backgrounds or overlays. The relationship with a simple mask image is relevant when you want a consistent masked appearance across an element: see mask-image for how non-border masks behave. The concept is analogous to how image-border slicing and tiling is controlled for ordinary borders — compare to border-image-repeat — so many of the same visual considerations (tiling seams, scaling distortion, and performance implications of many repeated tiles) apply when deciding how to use the property.

Definition

Initial value: stretch
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.maskBorderRepeat

Syntax

mask-border-repeat: <repeat-style> [ <repeat-style> <repeat-style> ]?;

Values

stretchThe mask image is stretched to fill the border area.
repeatThe mask image is repeated (tiled) to fill the border area.
roundThe mask image is repeated, but scaled so that it fits an integer number of times.
spaceThe mask image is repeated, and extra space is distributed evenly between the tiles.

Example

HTML

<div class="grid">

    <figure class="card card-stretch">

        <figcaption>mask-border-repeat: stretch</figcaption>

        <div class="inner">Stretch</div>

    </figure>



    <figure class="card card-repeat">

        <figcaption>mask-border-repeat: repeat</figcaption>

        <div class="inner">Repeat</div>

    </figure>



    <figure class="card card-round">

        <figcaption>mask-border-repeat: round</figcaption>

        <div class="inner">Round</div>

    </figure>



    <figure class="card card-space">

        <figcaption>mask-border-repeat: space</figcaption>

        <div class="inner">Space</div>

    </figure>

</div>

CSS

/* Decorative SVG used as a 9-slice mask source (data URL) */
:root {
    --mask-src: "data:image/svg+xml;utf8,";
}

/* Layout */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 24px;
    background: #f3f4f6;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 18px;
    min-height: 120px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffd8a8 0%, #ffb4a2 100%);
    color: #2b2b2b;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
}

.card figcaption {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.card .inner {
    background: rgba(255,255,255,0.85);
    padding: 10px 12px;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
}

/* Common mask-border settings for all cards */
.card {
    /* mask-border is a 9-slice technique similar to border-image but for masking */
    -webkit-mask-border-source: var(--mask-src);
    -webkit-mask-border-slice: 8;
    -webkit-mask-border-width: 14px;

    mask-border-source: var(--mask-src);
    mask-border-slice: 8;
    mask-border-width: 14px;

    /* ensure the mask is applied to the element's alpha channel */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Demonstrate different mask-border-repeat values */
.card-stretch {
    -webkit-mask-border-repeat: stretch;
    mask-border-repeat: stretch;
}

.card-repeat {
    -webkit-mask-border-repeat: repeat;
    mask-border-repeat: repeat;
}

.card-round {
    -webkit-mask-border-repeat: round;
    mask-border-repeat: round;
}

.card-space {
    -webkit-mask-border-repeat: space;
    mask-border-repeat: space;
}

/* Small responsive polish */
@media (max-width: 480px) {
    .grid { gap: 12px; padding: 12px; }
    .card { padding: 12px; }
}

Result

Editor

Browser Support

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