box-decoration-break controls what happens to an element’s borders, backgrounds, padding, shadows, and other decorations when its box is split into fragments—for example, when highlighted text wraps onto another line. Use slice to make the fragments look like pieces of one continuous box; use clone to decorate each fragment separately.
What does box-decoration-break do?
CSS can split an element’s box when it crosses a line break, column break, page break, or another fragmentation boundary. Each resulting piece is a fragment. The box-decoration-break property determines how the element’s decoration is drawn across those fragments.
The property applies to all elements, is not inherited, and has a discrete animation behavior. Its initial value is slice; its other property-specific value is clone. CSS-wide keywords also apply.
What is the difference between slice and clone?
| Value | How decoration is drawn | Typical visual effect |
|---|---|---|
slice |
The browser treats the box as if it were whole, then slices its decoration across the fragments. | The pieces retain the appearance of one continuous box. A border or background may appear cut at a break rather than restarted around each piece. |
clone |
Each fragment is rendered independently with its own applicable decoration. | Each piece can have its own border, padding, margin, corner radius, border image, shadow, and background. |
Background behavior follows the same distinction: slice maps the background as part of the hypothetical whole box, while clone paints each fragment independently. In particular, a non-repeating background image can be drawn again for separate cloned fragments.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
How to add a background around wrapped text
For a highlighted phrase that wraps across lines, clone lets each line fragment receive its own padding and rounded background. The prefixed declaration shown below is a compatibility technique used in MDN examples; whether it is needed depends on the browser and the kind of fragmentation.
.highlight {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0 .25em;
border-radius: .25em;
background: gold;
}Apply the class to the inline text you want to highlight. If the phrase breaks across lines, the cloned decoration is drawn separately for each fragment. For a single unbroken line, there is no line fragment boundary for this property to change.
When to use each value
Choose clone for separate decorated pieces
Use clone when each wrapped line or other fragment should look complete on its own—for example, a rounded highlight around each line of a phrase, or a decorated edge around each piece of a block divided by columns or pages. Account for repeated decoration, especially if the background includes a non-repeating image.
Choose slice for continuity across a break
Use slice when the fragments should read visually as sections of one box rather than as separately decorated boxes. Since it is the initial value, it applies when no other value is specified.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Browser support and the -webkit- prefix
Support varies by browser and fragmentation mode, so an unprefixed declaration alone may not work everywhere. MDN labels the property “Limited availability” and says it is not Baseline because it does not work in some widely used browsers. Check the MDN compatibility information for the browsers you need to support.
A Chrome for Developers article reports that Chrome 130, released in 2024, supports unprefixed clone for inline and block fragmentation. That article describes Firefox as fully supporting the property and Safari’s support as prefixed and limited to inline fragmentation. These are versioned implementation details, not a guarantee for every current device, embedded browser, or later release; consult the Chrome for Developers overview alongside the live compatibility table.
Rank #4
Including -webkit-box-decoration-break before the standard declaration can address implementations that require the prefix, but it is not required in every browser. If the layout matters, check the target browsers and test the actual inline, column, or page-fragmented layout in them.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Free tools Windows power users keep installed
One-click scans. No signup required.
