box-decoration-break
The box-decoration-break CSS property sets whether box decorations, such as borders or backgrounds, of an element divided across a page, column, or region wraps each fragment or splits across the break.
Overview
The box-decoration-break CSS property sets whether box decorations, such as borders or backgrounds, of an element divided across a page, column, or region wraps each fragment or splits across the break.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 130 | 130 | 32 | 7 | 130 | 7 | |
clone | 130 | 130 | 32 | 7 | 130 | 7 |
slice | 130 | 130 | 32 | 7 | 130 | 7 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Compatibility
- Available with a vendor prefix: -webkit- (22)
Implementation note
- This property is only supported for inline elements.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Compatibility
- Available with a vendor prefix: -webkit- (79)
Implementation note
- This property is only supported for inline elements.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- This property is only supported for inline elements.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Compatibility
- Available with a vendor prefix: -webkit- (25)
Implementation note
- This property is only supported for inline elements.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- This property is only supported for inline elements.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (130)
Compatibility
- This value was only supported with the -webkit- prefix.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (130)
Compatibility
- This value was only supported with the -webkit- prefix.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (130)
Compatibility
- This value was only supported with the -webkit- prefix.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (130)
Compatibility
- This value was only supported with the -webkit- prefix.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (130)
Compatibility
- This value was only supported with the -webkit- prefix.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (130)
Compatibility
- This value was only supported with the -webkit- prefix.
Syntax
CSS
.tag {
box-decoration-break: clone;
background: #4caf50;
padding: 2px 8px;
border-radius: 4px;
}Live demo
Use cases
Browser-native behavior
Use box-decoration-break to rely on the platform for behavior that would otherwise require extra code or CSS complexity.
Progressive enhancement
Enhance the experience where support exists while keeping a solid baseline elsewhere.
Cautions
- Check browser support and actual product need before adding a new platform feature widely.
- Keep feature usage understandable so future contributors know why it was chosen.
Accessibility
- New platform features should still preserve readable defaults and robust interaction patterns.
- Verify that enhancement paths do not leave unsupported environments with a broken experience.
Related links
Powered by web-features