CSS - Box Decoration Break

Slice

• slice (default): When set to slice, the element's box decorations (such as borders, padding, and backgrounds) are treated as if the element were rendered as a single box. The decorations are applied to the entire box, and when the box is broken (e.g., across multiple lines or pages), the decorations are also broken at the same position.

Clone

• clone: When set to clone, the element's box decorations are applied individually to each box fragment created by the break. Each box fragment (e.g., each line of an inline element or each part of a broken block-level element) gets its own set of decorations. The decorations are duplicated and drawn for each fragment independently.

The box-decoration-break property is useful when dealing with inline elements that span multiple lines or when you want to control how the decorations of a block-level element are handled when it is broken across pages or columns.

You will see how the box-decoration-break property affects inline and block-level elements with code examples showing differences between the values.

Inline Elements

The box-decoration-break property affects inline elements that span multiple lines. When set to the default value slice, the decorations are applied as if the element were a single box, and the decorations are also broken at the line break. When set to clone, each line of the inline element gets its own set of decorations.

<span class="slice">
  This is an inline element that spans multiple lines. Notice how the background and border are sliced at the line break.
</span>

<span class="clone">
  This is an inline element that spans multiple lines. Notice how the background and border are cloned for each line.
</span>

span {
  background-color: lightblue;
  border: 2px solid blue;
  border-radius: 10px;
  padding: 5px;
}

.slice {
  box-decoration-break: slice;
}

.clone {
  box-decoration-break: clone;
}

In this example, the first <span> element has box-decoration-break set to slice, while the second <span> element has it set to clone. You'll notice that for both elements, backgrounds and borders behave differently.

Block-level Elements

The box-decoration-break property can also be applied to block-level elements. When a block-level element is broken across pages or columns, you can control how decorations are handled using this property.

<div class="slice">
  <p>
    This is a block-level element that spans multiple pages or columns. With box-decoration-break: slice, backgrounds, padding, and borders are sliced at break points.
  </p>
</div>

<div class="clone">
  <p>
    This is a block-level element that spans multiple pages or columns. With box-decoration-break: clone, backgrounds, padding, and borders are cloned for each fragment.
  </p>
</div>

div {
  background-color: lightgreen;
  border: 2px solid green;
  padding: 10px;
  border-radius: 10px;
}

.slice { 
  box-decoration-break: slice; 
} 

.clone { 
  box-decoration-break: clone; 
}

In this example, the first <div> element has box-decoration-break set to slice, while the second <div> element has it set to clone. When block-level elements are broken across pages or columns, their decoration (background, padding, border) is sliced at the breaking point in the first case while duplicated in the second case.

These examples show how different values of box-decoration-break affect both types (inline/block) of HTML tags when they span over more than one unit (lines/pages/columns).