demo · v130

box-decoration-break: clone vs slice

Toggle slice (default — borders only on the first/last fragment) versus clone (each fragment gets its own borders, padding, shadow). Watch the inline highlight wrap across lines and the multi-column block break across columns.

inline fragmentation (line wrap)

The phrase "web standards are a slow-moving consensus engine" spans several lines so the highlight has to fragment.

block fragmentation (multicol)

This block is placed inside a 2-column container. With slice it draws a single border that the column break interrupts; with clone, each fragment of the block — one per column — gets a full set of borders, padding, and shadow as if it were a standalone box.

the code

.emph {
  background: blue; color: white;
  padding: 0.2rem 0.6rem;
  border: 2px solid black;
  box-shadow: 3px 3px 0 black;

  box-decoration-break: clone;  /* unprefixed in v130 */
}

the code

see also