🎁 CSS box-decoration-break — Complete Tutorial

🌐 What Is box-decoration-break?

The box-decoration-break property controls howbackgrounds, borders, padding, and shadows behave when an element is split across multiple lines, columns, or pages.

>>“Use box-decoration-break to decide whether each line fragment should look like a separate box or parts of one continuous box.”

Note

✔ Works with inline elements that wrap
✔ Works with multi-column layouts ✔ Works with page breaks (printing) ✔ Essential for stylizing inline text with backgrounds or borders

📦 Syntax

box-decoration-break syntax

box-decoration-break: slice | clone;
ValueDescription
sliceDefault. Background/border do NOT repeat. They appear sliced across lines.
cloneEach line/fragment receives its own full box with border, padding, and background.

📌 Why This Matters?

When text wraps to the next line, browsers normally treat the inline box as a **single continuous decoration**, so backgrounds or borders may look broken. With clone, each wrapped line gets a fresh full box.

📌 1. Default Behavior (slice)

slice default

span {
  background: yellow;
  padding: 4px;
  box-decoration-break: slice; /* default */
}

The background and padding appear sliced across lines—no repeated borders.

📌 2. Clone Decoration for Each Line

Clone style

span.highlight {
  background: yellow;
  padding: 4px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* Safari support */
}

Each wrapped line looks like separate highlighted blocks. This is commonly used for modern inline highlighting.

📌 Visual Example

Imagine this text wraps into two lines:

  • slice: background is cut in the middle
  • clone: each line gets its own full padded box

📌 3. Highlighting Inline Quotes or Words

Inline highlight

.highlight {
  background: #ffeb3b;
  padding: 4px 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Perfect for marking important phrases while maintaining clean wrapping.

📌 4. Used in Multi-Column Layouts

Columns example

p {
  column-count: 2;
}

mark {
  background: lightpink;
  box-decoration-break: clone;
}

When text breaks across columns, each fragment receives consistent decoration.

📌 5. Page Breaks in Printed Documents

Print example

@media print {
  .note {
    background: #ffff99;
    padding: 10px;
    box-decoration-break: clone;
  }
}

Ensures notes remain well-styled even when split across printed pages.

🧪 Real-World Use Cases

1️⃣ Highlight System (e.g., Notion-like)

Notion-style highlight

.notion-highlight {
  background: #ffeaa7;
  padding: 2px 4px;
  border-radius: 3px;
  box-decoration-break: clone;
}

2️⃣ Stylish Inline Badges

Inline badge

.badge-inline {
  background: #6200ea;
  color: white;
  padding: 3px 6px;
  border-radius: 4px;
  box-decoration-break: clone;
}

3️⃣ Callouts Inside Multi-Column Articles

Column callouts

.callout {
  background: #c8e6c9;
  padding: 6px;
  box-decoration-break: clone;
}

Keeps styled callouts visually consistent across columns.

⚠️ Common Mistakes

  • ❌ Forgetting Safari support → must include -webkit-box-decoration-break
  • ❌ Expecting it to work on block-level elements (mainly affects inline fragments)
  • ❌ Thinking it affects text splitting — it only affects decoration, not line breaks

Note

box-decoration-break affects styling, not how lines wrap.

🔥 Summary

The box-decoration-break property controls how lines, columns, and page fragments handle backgrounds, borders, and padding. Use clone when you want clean, repeated decoration for wrapped lines — perfect for highlighted text or multi-column layouts.

>>“Wrapping text shouldn’t break your design — box-decoration-break keeps it beautiful.”

Learn more →MDN Docs 📘