CSS

🎯 CSS box-decoration-break Property

The box-decoration-break CSS property controls how an element’s background, border, padding, and other decorations behave when the element is split across multiple lines, columns, or pages.

It is especially useful for inline elements that break onto multiple lines or for print layouts.

🔹 Why Use box-decoration-break?

Key Benefits
Controls how borders behave when text wraps.
Improves multi-line UI styling consistency.
Useful for badges, labels and highlights.
Important for print and column layouts.

🧩 Values of box-decoration-break

1️⃣ slice (Default)

The element is treated as a single continuous box. Decorations are not split visually.

CSS


span {
    box-decoration-break: slice;
}

2️⃣ clone

Each fragment of the element gets its own border, background, and padding.

CSS


span {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

This creates a separate styled box for each line of text.

3️⃣ initial

Resets the property to its default value, usually slice.

CSS


span {
    box-decoration-break: initial;
}

📌 Practical Example

CSS


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

Each wrapped line gets its own background and padding, creating a clean highlighted effect.

📊 Comparison
slice → One continuous decoration across lines.
clone → Each line gets its own decoration.
initial → Default browser behavior.

🧠 Summary
box-decoration-break controls how decorations behave when a box breaks.
slice keeps it as one continuous element.
clone splits it into independent styled fragments.

CSS box-sizing

CSS box-shadow

CSS

CSS