demo · v130
Border-radius on inline spans
Chrome 130 ships the unprefixed box-decoration-break. The most visible effect is on inline spans with border-radius: clone gives each line fragment its own full rounded box, while slice treats the element as one box cut by line breaks — no rounding at the cut edges. Toggle below to see the difference.
box-decoration-break:
The new unprefixed box-decoration-break property ships in Chrome 130,
joining Firefox and Safari to close a long-standing interoperability gap for inline highlighted text
that wraps across multiple lines in a paragraph.
box-decoration-break: clone;
Side-by-side comparison
clone — each fragment gets full decoration
This is a longer piece of text with a
multi-line inline span that wraps across lines and gets a full rounded box on each line
of the paragraph.
border-radius applied at both ends of every line fragment ✓
slice — one box cut at line breaks
This is a longer piece of text with a
multi-line inline span that wraps across lines and gets a full rounded box on each line
of the paragraph.
border-radius only at the real start/end; cut edges are square
How decoration properties split per fragment
| Property | clone (each fragment) | slice (one box cut) |
|---|---|---|
| border-radius | Full radius on every fragment ✓ | Radius only at real start/end |
| border | Full border per fragment | No border at cut edges |
| padding | Full padding per fragment | Padding shares across cut |
| background | Repeated per fragment | Continues across fragments |
| box-shadow | Shadow on each fragment | Shadow only at real edges |
/* Chrome 130: unprefixed */
span {
box-decoration-break: clone; /* or: slice (default) */
}
/* Full cross-browser */
span {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* CSS.supports check */
const supported = CSS.supports('box-decoration-break', 'clone');
/* Use case: highlighted text with border-radius */
.highlight {
background: rgba(59,130,246,0.15);
border: 1px solid rgba(59,130,246,0.5);
border-radius: 4px;
padding: 2px 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone; /* Chrome 130+ unprefixed */
}