CSS box-decoration-break Property

The box-decoration-break is a CSS property which specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element are applied when the box is fragmented.

The box-decoration-break property has two values. The slice value applies decorations to the entire element as if it were not fragmented, then slices the box at the edges of each fragment. The clone value applies each decoration to every fragment independently. Borders wrap the four edges of each fragment, and backgrounds are fully redrawn for each fragment. Note that fragmentation can occur not only from line breaks but also from page or column breaks.

Initial Value	slice
Applies to	Block-level elements, flex containers, and grid containers.
Inherited	No.
Version	CSS3
DOM Syntax	object.style.boxDecorationBreak = "clone";

Syntax

Syntax of CSS box-decoration-break Property

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

Here is an example with the clone value, where decorations apply to each fragment as if the fragments were individual elements.

Example of CSS box-decoration-break Property with clone value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #1c87c9;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
      }
      span.box {
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>Here the box-decoration-break is set to "clone".</p>
    <span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>

Try it Yourself »

Result

Modern browsers support this property natively without prefixes, but the -webkit- prefix is included in the examples for legacy compatibility.

Let’s see another example where the slice value is applied to the box. Here the box is sliced into pieces.

Example of CSS box-decoration-break Property with slice value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #8ebf42;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
        background-color: #ccc;
      }
      span.box {
        -webkit-box-decoration-break: slice;
        box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>
      Here the box-decoration-break is set to "slice" which is the default value of this property.
    </p>
    <span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>

Try it Yourself »

Result

Now let’s see how a box shadow is applied to the sliced box.

Example of CSS box-decoration-break Property with slice value and shadow

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #8ebf42;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
        background-color: #cccccc;
        box-shadow: 5px 4px 10px #666666;
        box-decoration-break: slice;
        -webkit-box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>
      Here the box-decoration-break is set to "slice" which is the default value of this property.
    </p>
    <span>Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>

Try it Yourself »

Result

Values

Value	Description
slice	Box decorations are set to the whole element and break at the edges of the element fragments.
clone	Box decorations are set to each fragment individually.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

Practice

What does the CSS box-decoration-break property do?

It defines how the background, borders, shadow, etc, of an element should be displayed in an inline format.
It defines how the font and text of an element should be displayed.
It controls how the element box is decorated when it spans multiple lines.
It determines the color of the element box.