CSS box-decoration-break

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.

This text style is cloned for each fragment

This text style is sliced for each fragment
  .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;

<div class="box">
  <span class="fragment clone">
    This text style is cloned for each fragment
  <br /><br />
  <span class="fragment slice">
    This text style is sliced for each fragment

Using box-decoration-break

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.

Browser support

This table shows when box-decoration-break support started for each browser.

22.0 Sep 2012
32.0 Sep 2014
Not Supported
11.5 Aug 2011
6.1 Jun 2013

You may also like

Last updated on Sep 30, 2023