box-decoration-break Demo & Generator

The CSS property box-decoration-break controls how element decorations (background, border, border-radius, box-shadow, etc.) are drawn when an inline element breaks across lines, columns, or pages. It accepts two values: slice (default) and clone.

slice treats the element as one continuous box; decorations are sliced at break points so that the pieces fit together (like cutting a picture into two). clone gives each fragment its own complete set of decorations – each line/column/page gets its own border, background and rounded corners as if they were separate elements.

Use clone when you want each visible fragment of an element to look like a self‑contained styled box – for example, highlighted text in articles, tags that break across lines, or decorative inline elements that should have rounded borders on every piece.

No, it only applies to inline-level elements or fragments inside a multi‑column, flex, or grid layout where an element is split across lines, columns or pages. Block boxes are not affected.

box-decoration-break is supported in all modern browsers (Chrome, Firefox, Safari, Edge) and has been for many years. Always test in your target browsers if you rely on exact rendering.

With the default slice mode, shadows and rounded corners are only applied to the whole box edge, which can disappear at break points. Switch to clone to see the full effect on each fragment.