CSS box-decoration-break Property

This property defines how an element's fragments are rendered when it breaks across multiple lines, columns, or pages.

selector { box-decoration-break: slice | clone; }
slice The element is treated as a single continuous box that is sliced into fragments at the break points.
clone Each fragment of the element is rendered independently with its own border, padding, and background.

Code Examples

A basic example showing how a span maintains its border and padding across a line break using the clone value.

<style>
.highlight {
  background-color: #ffd700;
  border: 2px solid #000000;
  padding: 0px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
</style>
<p>This is a long sentence with a <span class="highlight">wrapped highlight that keeps its padding and border</span> on every single line.</p>

An advanced example using a multi-column layout and JavaScript to toggle the decoration behavior on a split box.

<div id="content" style="column-count: 2; width: 400px; border: 1px solid #cccccc;">
  <div id="box" style="background: linear-gradient(#f0f0f0, #bdbdbd); border: 3px solid #333333; padding: 10px; -webkit-box-decoration-break: slice; box-decoration-break: slice;">
    This box will split across two columns. Use the button to toggle between slice and clone behavior to see the border wrap.
  </div>
</div>
<button onclick="toggleBreak()" style="margin-top: 10px;">Toggle Clone</button>

<script>
function toggleBreak() {
  const box = document.getElementById("box");
  const isSlice = box.style.boxDecorationBreak === "slice" || box.style.webkitBoxDecorationBreak === "slice";
  const newVal = isSlice ? "clone" : "slice";
  box.style.webkitBoxDecorationBreak = newVal;
  box.style.boxDecorationBreak = newVal;
  box.style.border = "3px solid #ff0000";
}
</script>

Pro Tip

Pair "box-decoration-break: clone" with "padding" and a bright "background-color" on spans to create a modern "highlighter" effect that maintains its shape and spacing perfectly even as the window is resized and text wraps.

Deep Dive

Think of a long sausage. If you cut it into pieces using the "slice" method, you only see the meat at the ends where it was cut. If you use "clone", it is like each piece magically grows a new rounded end and casing. In CSS, when an inline element like a span wraps to a second line, "slice" cuts the border and background open at the end of the first line and start of the second. "clone" applies the full border, padding, and background-image to every single line fragment independently. This ensures that decorations like rounded corners or shadows appear on every piece of the broken box rather than just the start and end of the entire string.

Best Practices

Always include the "-webkit-" prefix alongside the standard property because Chrome, Safari, and Edge still require it for the property to function. Use "clone" when you want multi-line text highlights to look consistent, ensuring that the padding and borders do not disappear where the text wraps. This property is most effective on inline elements or block containers used in multi-column layouts.

Common Pitfalls

The most common mistake is forgetting that this property has no visible effect unless the element actually breaks across lines or containers. If your element is a single-line block, "slice" and "clone" will look identical. Also, be aware that "box-shadow" is also cloned, which can lead to overlapping shadows if your line-height is too tight.

Accessibility

This property is purely decorative and does not change the document structure or how screen readers announce content. However, avoid using "clone" with heavy borders or shadows that might overlap and obscure text on adjacent lines, which can hinder readability for users with visual or cognitive impairments.

Dev Data Table: box-decoration-break property

default slice
animatable no
inherited no
experimental no
year_intro 2011
year_standard 2016
js_syntax_1 element.style.boxDecorationBreak = "clone";
js_syntax_2 element.style.setProperty("box-decoration-break", "clone");
js_note Most browsers still require the Webkit prefix, so you may need to use element.style.webkitBoxDecorationBreak in your logic.
browsers { "Chrome": 22, "Edge": 79, "Firefox": 32, "Safari": 7, "Opera": 15, "Chrome Android": 22, "Safari on iOS": 7, "Samsung Internet": 1, "Opera Mobile": 14 }
results render here...