Box-Decoration-Break Property
Last updated: 2026-09-13
box-decoration-break Box-Decoration-Break Property
The box-decoration-break property controls how an element's decorations, such as background, border, and padding, render at a break point like a line wrap or page break. The default value, slice, renders the decoration as if it were cut; clone renders a complete decoration for each fragment. It mainly affects how inline elements look across line breaks and print pagination.
| Category | |
|---|---|
| Initial Value | slice |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
box-decoration-break: slice | clone;⚙️ Values
| Value | Type | Description |
|---|---|---|
slice | clone | Keyword | How decorations break. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-decoration-break | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v16 |
| Supported in all major browsers | |||||
Tip： For inline elements whose background spans multiple lines, box-decoration-break:clone gives each line its own complete padding and rounded corners, which looks better.
❓ FAQ
QWhat's the difference between slice and clone?
Aslice, the default, cuts the element at the break like a knife: background, border, and padding continue across the break without closing back up, so the first and last fragments look incomplete. clone renders each fragment independently with a full background, border, padding, and rounded corners, so every line looks like a complete little box. For wrapped inline elements where each line should have full rounded corners, use clone.
QWhen would I need this property?
AThe most typical case is an inline element, such as a span or a, that wraps across lines: to give each line its own complete background block, rounded corners, and padding, use box-decoration-break:clone, which is common for highlights, tag styles, and multi-line link underlines. slice suits effects where the decoration should flow continuously. Another scenario is print pagination, where you control how decorations break at page edges.
QWhat is the browser support for box-decoration-break?
AFirefox supports it natively. Chrome, Edge, and Safari, the WebKit-based browsers, historically require the -webkit-box-decoration-break prefix; Chrome supports the unprefixed form since 115, while Safari has long depended on the prefix. To be safe, write both: the -webkit- prefixed version first, then the standard declaration. The browsers that understand the prefixed form use it, and newer ones fall through to the standard property.
QWhich decoration styles does it affect?
AIt affects box decorations such as background, border, border-radius, padding, and box-shadow, determining how they render at a line wrap or page break. Note that it does not affect how inline content is arranged after the split, and it does not change text wrapping itself; it only controls how the decorations behave at the break. So you can apply it freely without worrying about the underlying text flow.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
