A highlighted phrase with background and padding looks perfect on one line and ragged the moment it wraps: the first fragment loses its right padding, the last loses its left, and the edges look sliced. One property decides who wins.

mark {
  padding: 0.15em 0.5em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Where fragments appear

  • Line wrapping is the everyday case: one span flowing across two lines becomes two boxes in paint terms.
  • Multi-column layouts fragment inline content across column boundaries the same way.
  • Paged media fragments across page breaks; the property was written for that case and carries over untouched.

Sliced or cloned

slice, the default, paints the decorations as one long strip and shows only the visible fragment. clone treats each fragment as a complete little box, with full padding, border, radius, and background. For highlight pens, inline tags, and code tokens, clone is almost always the design the mockup promised.

Keep both lines of the prefixed and unprefixed pair for now; the cost is zero and the alternative is one engine rendering ragged highlights. gacor detail work, the kind a reader never names but always feels.