box-decoration-break helps to define how elements should be rendered across lines
- Published at
- Updated at
- Reading time
In the past, I needed to style link elements in particular pretty or fancy ways. These visual effects often became trickier to implement than expected because links can be broken across several lines. This line break then messed up the beautiful styling. For example,
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.
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
clone leads to "cut off" styles. In contrast,
slice changes the rendering so that 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:
box-decoration-break is a welcome help when dealing with fancy styles across lines and columns. 🎉
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!
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 15 days ago.