box-decoration-break
Setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
Overview
| Class | Declarations |
|---|---|
box-decoration-break:slice | -webkit-box-decoration-break: slice;
box-decoration-break: slice;
|
box-decoration-break:clone | -webkit-box-decoration-break: clone;
box-decoration-break: clone;
|
box-decoration-break:<type> | -webkit-box-decoration-break: <type>;
box-decoration-break: <type>;
|
Examples
Slice
A wrapped inline element is painted as one box, then sliced across its line fragments. Interior breaks do not repeat the inline-start and inline-end borders or padding.
<!-- Slice · one continuous decoration --><div class="w:220px max-w:100% font-lg leading:2.2"> <span id="target" class="px-xs py-3xs b:1px|solid|var(--color-blue) r-sm bg-blue-10 fg-blue-80 box-decoration-break:slice"> Clear thinking needs room to take shape. </span></div>Generated CSS
@layer utilities { .box-decoration-break\:slice { -webkit-box-decoration-break: slice; box-decoration-break: slice }}The text remains one native inline element. The explicit 220px container forces real wrapping; no line breaks or separate spans simulate the fragments.
Clone
Clone paints each inline fragment independently. Compare the same text and width: every line receives its own border, corner curves and inline padding.
<!-- Slice · shared decoration --><div class="w:220px max-w:100% font-lg leading:2.2"> <span id="target" class="px-xs py-3xs b:1px|solid|var(--color-blue) r-sm bg-blue-10 fg-blue-80 box-decoration-break:slice"> Clear thinking needs room to take shape. </span></div><!-- Clone · each fragment decorated --><div class="w:220px max-w:100% font-lg leading:2.2"> <span id="target" class="px-xs py-3xs b:1px|solid|var(--color-blue) r-sm bg-blue-10 fg-blue-80 box-decoration-break:clone"> Clear thinking needs room to take shape. </span></div>Repeated padding may also change where the text wraps. Keep enough line height so neighboring fragments remain readable.
Use on inline content
A real inline link can wrap while keeping a continuous accessible name. Focus the highlighted phrase, then press Enter to reach the note below.
<!-- Wrapped link · one accessible name --><div class="w:220px max-w:100% font-lg leading:2.2"> <a id="target" href="#notes" class="px-xs py-3xs b:1px|solid|var(--color-blue) r-sm bg-blue-10 fg-blue-80 box-decoration-break:clone"> Read the full selection notes and source details. </a> <p id="notes" tabindex="-1" class="mb:0 mt-lg font-sm text-body"> Selection notes and source details. </p></div>The utility controls decoration, not semantics. The link retains its native href, focus indicator and destination. The generated utility includes the WebKit-prefixed declaration for engines that require it.
Apply conditionally
Widen to sm to switch from slice to clone. Print uses slice. The container width and line wrapping respond naturally to the viewport.
<!-- Slice → clone at sm --><div class="w:100% max-w:360px font-lg leading:2.2"> <span id="target" class="px-xs py-3xs b:1px|solid|var(--color-blue) r-sm bg-blue-10 fg-blue-80 box-decoration-break:slice box-decoration-break:slice@print box-decoration-break:clone@screen@sm"> Clear thinking needs room to take shape. Keep each line connected to the same idea. </span></div>Fragmentation support varies across layout contexts and engines. These examples demonstrate wrapped inline content; the readout shows the standard and WebKit property values.