A box-decoration-break sets the style of element fragments.
Fragments are the pieces that occur when an in-line element does not fit inside its container and needs to wrap.
Two fragment styles: first clone and the second slice.
<style>
.box {
width: 165px;
padding: 10px;
border: 2px solid steelblue;
}
.fragment {
line-height: 2;
border: 1px solid steelblue;
border-radius: 10px;
padding: 2px;
background-color: aliceblue;
}
.clone {
box-decoration-break: clone;
}
.slice {
box-decoration-break: slice;
}
</style>
<div class="box">
<span class="fragment clone">
This text style is cloned for each fragment
</span>
<br /><br />
<span class="fragment slice">
This text style is sliced for each fragment
</span>
</div>
box-decoration-break sets the fragment style.
Its value determines how the following properties are applied to the fragments:
box-decoration-break: slice | clone |
initial | inherit | unset;
| Value | Description |
|---|---|
slice |
Default. Box decorations apply to the entire element and break (slice) at the fragment edges |
clone |
Box decorations apply to each fragment and the styles are completely cloned. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This table shows when box-decoration-break support started for each browser.
 Chrome
|
22.0 | Sep 2012 |
 Firefox
|
32.0 | Sep 2014 |
 IE/Edge
|
Not Supported | |
 Opera
|
11.5 | Aug 2011 |
 Safari
|
6.1 | Jun 2013 |
