CSS box-decoration-break Property

CSS `box-decoration-break` Property

The box-decoration-break property in CSS controls how decorations (such as borders, background colors, and shadows) are applied to elements when they break across multiple lines or columns.

This property is useful when an element is split (for example, in multi-column layouts or hyphenated text), and you want to control whether the decoration applies to the entire element or just to individual pieces of the split content.

1. Syntax

selector {
  box-decoration-break: value;
}

Value	Description
`slice` (default)	Decorations are applied to each fragment of the element when it breaks.
`clone`	Decorations are applied to the entire element as if it weren’t broken.

2. Example – Default `slice` Behavior

When box-decoration-break is set to slice, decorations like borders are applied to each part of the element individually when it breaks across lines.

div {
  width: 150px;
  padding: 20px;
  background-color: #f1f1f1;
  border: 5px solid #333;
  box-decoration-break: slice;
  column-count: 2;
}

<div>
  This is some long text that will be split across multiple columns.
</div>

✅ The border will be split at the break point between the columns.

3. Example – Using `clone` to Apply Decoration to the Entire Element

When box-decoration-break is set to clone, decorations like borders or background colors are applied to the whole element as if it wasn't broken, rather than applying them to each individual fragment.

div {
  width: 150px;
  padding: 20px;
  background-color: #f1f1f1;
  border: 5px solid #333;
  box-decoration-break: clone;
  column-count: 2;
}

<div>
  This is some long text that will be split across multiple columns.
</div>

✅ The border will apply to the entire element, wrapping around the content as a whole, even across the columns.

4. Best Practices

✔ Use box-decoration-break: slice when you want individual fragments of a broken element to have their own decorations.
✔ Use box-decoration-break: clone when you need consistent decorations around the entire element, even if it breaks across multiple lines or columns.
✔ This property is particularly useful for multi-column layouts and hyphenated text, ensuring that decorations behave as desired.

Souy Soeng

CSS box-decoration-break Property