Published at
Updated at
Reading time
2min
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.

Unfortunately, visual effects were often trickier to implement than expected because links can be broken across several lines. This line break then messed up the styling.

For example, padding and border-radius were only applied to an element's beginning and end. And 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: clone (the default value) and slice.

clone leads to "cut off" styles. In contrast, slice 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 the browser support?

MDN Compat Data (source)
Browser support info for box-decoration-break
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
2218793232771.5โ‰ค37

It's pretty green, so box-decoration-break is a welcome help when dealing with fancy styles across lines and columns. ๐ŸŽ‰

DevSheet showing the difference between box-decoration-break: clone and box-decoration-break: slice

If you want to play around with it, look at this CodePen example or check the excellent MDN docs for box-decoration-break. Have fun!

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 1 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.