CSS box-decoration-break Property

Definition and Usage

The box-decoration-break property controls how an element’s decorations are drawn when the box is split into fragments — across wrapped lines, CSS columns, or printed pages.

It affects background, padding, border, border-radius, box-shadow, border-image, clip-path, and margin. The initial value is slice.

CSS Syntax

For Safari, also set -webkit-box-decoration-break to the same value, placed before the standard property.

Property Values

How to Use box-decoration-break

Add decorations first, force a break, then choose slice or clone.

1. Style the element with background, padding, border, and/or radius so decorations are visible.
2. Create fragmentation: wrap inline text, use <br>, or flow into columns.
3. Set -webkit-box-decoration-break, then box-decoration-break, to slice or clone.
4. Compare both values — clone is what most highlight and pill designs need.

Live Preview

The marked span wraps onto several lines. Switch between slice and clone to see how radius and background behave at each break.

CSS Examples

Each snippet keeps CSS focused on box-decoration-break. Use Try It Yourself for a live editor.

<style>
  span {
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
    background: #dbeafe;
    border: 2px solid #2563eb;
    border-radius: 12px;
    padding: 0 0.5em;
  }
</style>

<p><span>The<br>quick<br>fox</span></p>

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

<p>Style
  <span class="mark">text that wraps onto multiple lines</span>.
</p>

<style>
  .cols { columns: 2; column-gap: 1rem; }
  .box {
    display: block;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: #dcfce7;
    border: 2px solid #16a34a;
    border-radius: 12px;
    padding: 0.5rem;
  }
</style>

<div class="cols">
  <span class="box">The<br>quick<br>fox jumps</span>
</div>

Key Takeaways