box-decoration-break helps to define how elements should be rendered across lines

Previously, I needed to style link elements in a pretty or fancy way.

Styling links can be tricky because the elements span multiple lines and a potential line break messes with the styling.

For example, padding and border-radius are only applied to an element's beginning and end. This behavior is not always what you want if your element spans across several lines.

Today I learned that box-decoration-break defines how elements are rendered across pages, columns, and lines. It accepts two values: slice (the initial value) and clone.

slice leads to "cut off" styles. In contrast, clone changes the rendering so every element fragment (an element spread across two lines includes two fragments) is rendered independently. Styles like padding are applied several times to all the element fragments. 🎉

box-decoration-break doesn't work for all CSS properties, though. The following properties are rendered independently:

• background
• border
• border-image
• box-shadow
• clip-path
• margin
• padding

What's the browser support?

MDN Compat Data (source)

Browser support info for box-decoration-break

130	130	130	32	32	7	7	Nö	130

With Chrome 130 being released October 2024, the browser support is pretty green and box-decoration-break is now a welcome help when dealing with fancy styles across lines and columns. 🎉

Have fun playing with a small demo below.