box-decoration-break helps to define how elements should be rendered across lines
- Published at
- Updated at
- Reading time
- 2min
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.
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?
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
22 | 18 | 79 | 32 | Non | 7 | 7 | 1.5 | โค37 |
It's pretty green, so 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 12 days ago.