demo · v130
Inline fragment gallery
Five real layouts where box-decoration-break changes the picture: line-broken inline spans, multi-column columnar text, ::first-line styling, ruby-grouped runs, and ::marker on a long list. Toggle slice vs clone; drag the container width; watch each fragment paint differently.
slice (legacy / no -webkit prefix)
clone (the Chrome-130 unprefixed value)
the code
/* Before Chrome 130, only -webkit-box-decoration-break: clone worked.
Chrome 130 ships the unprefixed property for both fragment kinds. */
.tag {
background: gold;
border: 2px solid black;
border-radius: 6px;
padding: 0.4rem 0.7rem;
box-decoration-break: clone; /* each line/column fragment gets its
OWN background, border, shadow,
border-radius. */
}