Box-decoration-break determines whether a fragmented box is decorated as one continuous box or as separate fragments. Clone repeats background, border, and padding treatment at each fragment; slice paints the decoration as a continuous box that has been cut at the break. Support for this property still varies, and some browsers require a prefixed form.
Make this comfortable
CSS box-decoration-break: control a highlight across wrapped lines
When to use it
An incident index highlights a short evidence label that can wrap on a narrow card. A cloned decoration gives each line its own padded boundary, so the second line does not appear to be missing a left edge. Keep the underlying text in normal inline markup; the decoration is not the label itself. Begin with a readable background and text contrast that work even if clone is ignored. Then test wrapping at several container widths, selection, high zoom, printing, and a browser using the prefixed declaration. A long translated label may form three or four fragments, which can look too much like separate controls. If that happens, use a simpler underline or border on the whole card instead of forcing a pill around every line. Do not use CSS fragmentation to group different records semantically; source markup must preserve that relationship.
.evidence-label { background: #dceef0; color: #153945; padding: .12em .38em; border-radius: .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }Cost and verification
Each fragment may paint its own background and rounded corners. On a handful of labels the rendering cost is minor, but many heavily shadowed, multi-line labels can add paint work. The larger cost is inconsistent appearance across browsers. Keep the unprefixed rule after the prefixed one and verify the target support matrix. A cloned background does not change hit targets or the semantic boundary of a link. If the label is interactive, its real anchor or button needs a visible focus state that remains clear around every wrapped line. Avoid hard-coded line breaks merely to manufacture a pleasing fragment shape; content width changes.
Common Mistakes
- Do not rely on clone as the only way text remains readable.
- Do not mistake wrapped fragments for separate semantic items.
- Do not force manual breaks to fit one screenshot.
Connected lessons
css
reference
web