box-decoration-break
Controls how an element's fragments (like when a line of text wraps or breaks across pages) are styled. 'Clone' repeats the padding and borders on every fragment, while 'slice' cuts them off.
It is documented as part of the CSS Fragmentation specification.
Syntax
/* Usage Example */
span.highlight {
background: linear-gradient(to right, #7c3aed, #ec4899);
padding: 0.2rem 0.5rem;
border-radius: 4px;
/* standard 'slice' (default) cuts borders/padding at line breaks */
/* 'clone' ensures every line fragment gets the background and padding */
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* Syntax */
box-decoration-break: slice;
box-decoration-break: clone;
/* Global values */
box-decoration-break: inherit;
box-decoration-break: initial;
box-decoration-break: revert;
box-decoration-break: revert-layer;
box-decoration-break: unset;box-decoration-break Browser support
Limited availability
Since
2020 86% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
130+
32+
7+
130+