CSS box-decoration-break Property

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.

Example

#

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
<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>

Using box-decoration-break

box-decoration-break sets the fragment style.

Its value determines how the following properties are applied to the fragments:

Syntax

box-decoration-break: slice | clone | 
                      initial | inherit | unset;

Values

#

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.

Chrome
22.0 Sep 2012
Firefox
32.0 Sep 2014
IE/Edge
Not Supported
Opera
11.5 Aug 2011
Safari
6.1 Jun 2013

You may also like

Guides