CSS box-decoration-break Property

Description

The box-decoration-break CSS property determines how an element’s decoration - such as its background, borders, shadows and corner rounding - is rendered when that element is split into multiple fragments by line breaks, column breaks or page breaks. Rather than changing the layout of the fragments, it affects painting: whether the visual decoration is treated as a single continuous surface spanning fragments or whether each fragment is given its own independent decoration. This distinction controls whether you see seamless continuation of a background or border across a break, or whether each fragment looks like a separate box with its own edges and corners.

Because this property governs painting behavior, it interacts directly with other visual properties. For example, how a repeated or spanning background appears across a column break, whether adjacent pieces produce doubled edges from the border, how rounded corners from border-radius are clipped at break points, and whether a box-shadow appears continuous or gets truncated at each fragment. Padding and interior spacing also affect the visual result because fragment-specific decorations will be applied inside each fragment’s padding box; see padding for how interior spacing influences where decorations are painted.

In practical terms, choosing the appropriate painting behavior matters for multi-column layouts, paged content (printing or paged media), and any flow where inline-level or internally fragmented boxes occur. If you want an unbroken visual surface - for instance, a background band that should span lines in a multi-line headline - you need the decoration treated as continuous. If instead each fragment should be visually self-contained (for example, to preserve distinct rounded corners or avoid a single visual element extending across unrelated columns), you’d prefer fragment-local decoration. This property is therefore important when fine-tuning the visual continuity of components that may break across lines, columns or pages, and when preventing unwanted visual artifacts such as double borders or mismatched corner radii at break points.

Definition

Initial value: slice
Applies to: All elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.boxDecorationBreak

Interactive Demo

box-decoration-break: slice;
-webkit-box-decoration-break: slice;

box-decoration-break: clone;
-webkit-box-decoration-break: clone;

This text breaks across multiple lines.

Syntax

box-decoration-break: slice | clone

Values

sliceNo border and no padding are inserted at a break; no box-shadow is drawn at a broken edge; border-radius does not apply to its corners; and backgrounds and the border-image are rendered for the whole box as if the box were unbroken.
cloneEach box fragment is independently wrapped with the border and padding. The border-radius and border-image and box-shadow, if any, are applied to each fragment independently. The background is drawn independently in each fragment of the element.

Example

HTML

<div class="demo">

    <div class="label">box-decoration-break: clone</div>

    <p>

        This paragraph contains a long inline element that will be fragmented across columns. 

        <span class="pill clone">This is a long highlighted phrase that will wrap and may be broken across columns or lines to demonstrate how clone works when decorations are duplicated for each fragment.</span>

        More surrounding text to help force fragmentation across the column boundary.

    </p>

</div>



<div class="demo">

    <div class="label">box-decoration-break: slice</div>

    <p>

        This paragraph contains a long inline element that will be fragmented across columns. 

        <span class="pill slice">This is a long highlighted phrase that will wrap and may be broken across columns or lines to demonstrate how slice works when decorations are drawn as a continuous box across fragments.</span>

        More surrounding text to help force fragmentation across the column boundary.

    </p>

</div>

CSS

/* Page basics */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: #f5f7fb;
    color: #0f172a;
    margin: 24px;
    line-height: 1.5;
}

/* Each demo uses two columns so inline elements can be fragmented across them */
.demo {
    column-count: 2;
    column-gap: 28px;
    background: #ffffff;
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    margin-bottom: 20px;
}

.label {
    font-weight: 600;
    margin-bottom: 10px;
    color: #1f2937;
}

p {
    margin: 0;
    color: #334155;
}

/* Decorative inline element (the element that will be fragmented) */
.pill {
    display: inline;
    padding: 6px 12px;
    margin: 0 6px;
    background: linear-gradient(180deg, #e6f0ff 0%, #d9ebff 100%);
    border: 2px solid #2b6cb0;
    color: #0b3b66;
    border-radius: 18px;
    font-weight: 600;
    /* Ensure wrapping inside the inline box is allowed */
    white-space: normal;
}

/* clone: each fragment gets its own padded/bordered box (rounded corners on each piece) */
.pill.clone {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* slice: the decoration is drawn as if continuous across fragments (corners only at ends) */
.pill.slice {
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
}

/* Small responsive tweak so columns behave on narrow screens */
@media (max-width: 520px) {
    .demo {
        column-count: 1;
    }
}

Result

Editor

Browser Support

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