Border
box-decoration-break
box-decoration-break sets how the background, border, padding, and rounded corners of an element split by a line or column break are drawn at the break.
Syntax
slice | clonePreview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
line-height: 2;
}
.box > :nth-child(2) {
padding: 2px 8px;
border-radius: 8px;
background: linear-gradient(90deg, #88d1c7, #eaac3a);
box-decoration-break: clone;
}Controls
box-decoration-breakChrome, Edge, and Firefox (Safari needs the -webkit- prefix and applies it to inline elements only)clone
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Values
slice: the initial value. The element is drawn as one unbroken box and then cut at the breaks. No border or padding is added at a break, rounded corners appear only at the two ends of the whole box, and the background (a gradient, for example) continues across the break.clone: each piece gets its own border, padding, rounded corners, and shadow, and the background is drawn afresh in each piece.
When to use it
Use it when a word highlighted with a background color and rounded corners wraps onto the next line and each line should get a closed, rounded shape.
Things to watch
- Safari supports it only as
-webkit-box-decoration-break, and only on inline elements. Chrome and Edge support the unprefixed name from version 130. - It also applies to block elements split across columns (
column-count, for example) or printed pages, except in Safari.
In the preview, supporting declarations open up the lines (line-height: 2) and give the span that wraps across lines (the second child) padding (padding: 2px 8px), rounded corners (border-radius: 8px), and a left-to-right gradient background. With slice the gradient runs on as one strip across the lines; with clone both ends of each line are rounded and the gradient starts over on each line.