Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

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.

Example of a cut link element which looks quite ugly spread across two 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
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
130130130323277Non130

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.

box-decoration-break

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

If you enjoyed this article...

Join 5.4k readers and learn something new every week with Web Weekly.

Web Weekly โ€” Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles