Full and unprefixed box-decoration-break support

concepts

1. clone vs slice toggle

   Inline fragmentation (line wrap) and multi-column fragmentation. Toggle slice / clone and watch the highlight wrap across lines and the multi-column block break across columns.

2. Paginated print preview

   The Chrome 130-specific win: block fragmentation for printing. A multi-page receipt-style block, rendered side-by-side in legacy slice and Chrome 130 clone mode, with full per-page borders, padding, and shadows in clone.

3. Inline fragment gallery

   Four layouts where the prefix-vs-unprefixed difference matters: line-wrapped inline spans, multi-column flow, ruby-glossed text, and wrapped list-item labels. Side-by-side render shows slice next to clone, with a written verdict for each layout type.

4. Border-radius on inline spans

   Toggle between clone and slice on a multi-line inline span with border-radius. The most visually striking difference: clone gives each line fragment its own fully-rounded pill; slice cuts the single box at line breaks.

5. Gradient Span

   Four inline highlight styles — gradient fill, pill, marker underlay, and outlined border — each using box-decoration-break: clone so wrapped fragments get their own complete decoration. Toggle between clone and slice to see exactly where each style breaks at line-wrap boundaries.

why it shipped

The box-decoration-break: clone CSS property is a useful feature because it addresses a common issue with how box decorations (backgrounds, borders, padding, etc.) are handled when an element is broken across multiple lines, columns, or pages.

references

• ChromeStatus entry
• Spec