CSS box-decoration-break: clone on Inline Spans

The CSS box-decoration-break: clone property controls how an element's styling behaves when it breaks across multiple lines, columns, or pages. When applied to multi-line inline <span> elements, it duplicates box decorations—such as padding, borders, margins, box-shadows, and background styling—independently across each individual line fragment rather than treating the wrapped text as a single, sliced box.

The Problem with Default Inline Wrapping

By default, inline elements use box-decoration-break: slice. When a styled <span> with padding, borders, or a background wraps onto a new line, the browser "slices" the element:

• The left padding, border, and border-radius appear only at the beginning of the first line.
• The right padding, border, and border-radius appear only at the end of the last line.
• The interior broken edges where the text wraps have no horizontal padding, border, or rounded corners.

This results in an awkward, broken appearance where the text on intermediate lines touches the edge of the background without spacing or borders.

How clone Solves It

Setting box-decoration-break: clone instructs the browser to render each line box as if it were a distinct, self-contained inline element.

With clone active:

• Padding: Applied to the left and right of every line segment.
• Borders: Rendered fully around each line box.
• Border-radius: Curves every corner of each broken line segment instead of just the outer edges.
• Backgrounds and Shadows: Drawn separately across each line fragment.

Practical Implementation

This property is especially useful for styling multi-line headings, tag badges, or highlighted text blocks.

.highlight {
  background-color: #fbd38d;
  color: #1a202c;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #d69e2e;
  
  /* Duplicate styles on each line */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Browser Support Note

While modern browsers support this property, WebKit-based engines (Chrome, Safari, and Edge) require the -webkit-box-decoration-break vendor prefix to render correctly. Always declare both the prefixed and unprefixed versions in your stylesheet to ensure broad compatibility.