CSS box-decoration-break Property

What You’ll Learn

The box-decoration-break property controls how backgrounds, padding, borders, and rounded corners look when an element is split into pieces. Use it when styled text or boxes break across lines, columns, or pages.

Definition and Usage

The box-decoration-break CSS property specifies how the background, padding, border, border-radius, box-shadow, and margin of an element are applied when the element’s box is fragmented. Fragmentation happens when content is split across lines, columns, or printed pages.

By default, browsers use slice, which treats decorations as if the box were never broken. With clone, each fragment gets its own full set of decorations — useful for pill-shaped highlights, badges, and bordered text that wraps cleanly.

📝 Syntax

The syntax for box-decoration-break is simple — it accepts one of two keyword values:

selector {
  box-decoration-break: slice | clone;
}

Basic Example

.highlight {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: #fef08a;
  padding: 0.15em 0.35em;
  border-radius: 0.25rem;
}

Syntax Rules

• The initial (default) value is slice.
• Only two keywords are valid: slice and clone.
• The property is not inherited — set it on the element that fragments.
• Include -webkit-box-decoration-break for broader WebKit support.
• Most visible effects appear on inline or inline-level elements that wrap or span columns.

💎 Property Values

The box-decoration-break property accepts exactly two keyword values. Each changes how decorations render across fragments.

When Does Fragmentation Happen?

Fragmentation is not an everyday layout term, but you see it often in real pages. These are the most common situations where box-decoration-break matters:

• Line wrapping — An inline <span> with a background wraps to the next line and splits into two visual pieces.
• CSS columns — A paragraph or inline element flows from one column into the next inside a multi-column container.
• Print and paged media — Content continues on the next printed page, breaking the element across pages.
• Long highlighted text — Badges, labels, or search highlights that must look polished when they wrap.

Without clone, wrapped highlights often look like one flat band cut awkwardly at line or column edges. With clone, each piece looks like its own rounded box.

Examples Gallery

See slice and clone in multi-column layouts, inline highlights, and rounded badges.

<style>
  .container {
    column-count: 2;
    column-gap: 20px;
  }

  .slice {
    box-decoration-break: slice;
    background: lightblue;
    padding: 10px;
    border: 2px solid blue;
  }

  .clone {
    box-decoration-break: clone;
    background: lightcoral;
    padding: 10px;
    border: 2px solid red;
  }
</style>

<div class="container">
  <p class="slice">Uses slice — continuous decoration.</p>
  <p class="clone">Uses clone — each fragment is styled separately.</p>
</div>

<style>
  .highlight {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background: #fef08a;
    padding: 0.15em 0.35em;
    border-radius: 0.25rem;
  }
</style>

<p>
  CSS lets you style
  <span class="highlight">text that wraps onto multiple lines with a clean highlight on every line</span>.
</p>

<style>
  .tag {
    padding: 0.2em 0.5em;
    border: 2px solid #7c3aed;
    border-radius: 999px;
    background: #ede9fe;
  }

  .tag--clone {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
</style>

<p><span class="tag tag--clone">New feature badge that wraps cleanly</span></p>

<style>
  .gradient-clone {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background: linear-gradient(90deg, #bfdbfe, #ddd6fe);
    padding: 0.25em 0.45em;
    border-radius: 0.35rem;
  }
</style>

<p style="max-width: 12rem;">
  <span class="gradient-clone">Gradient highlight that repeats on each wrapped line</span>
</p>

💡 Best Practices