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

Published at
Updated at
Reading time
1 min

This post is part of my Today I learned series in which I share all my learnings regarding web development.

In the past, I needed to style link elements in particular pretty or fancy ways. These visual effects often turned out to be trickier than expected because links can be broken across several lines. The spread then messed up the beautiful styling. For example, padding and border-radius were only applied to the beginning and end of the elements. This behavior is not always what you want if your element spans across several lines, though.

Example of a cut link element which looks quite ugly spread across two lines

Today I learned that you could use box-decoration-break to define how elements are rendered across pages, columns, and lines. It accepts two values: clone (the default value) and slice.

clone leads to "cut" styles. In contrast, slice changes the rendering so that every element fragment (an element spread across two lines includes two fragments) is rendered independently โ€“ thus, styles are applied several times. ๐ŸŽ‰

CSS properties that are rendered independently are the following:

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

box-decoration-break is a welcome help when dealing with "special" 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 you can have a look at a CodePen example or check the excellent MDN docs for box-decoration-break.

Related Topics

See null comment.