CSS box-decoration-break
January 20, 2025
box-decoration-break is a CSS property that lets you decide what the decorations of a box should do if that box is broken across multiple lines.
Now that sentence probably means nothing if you don’t already know what box-decoration-break does, so let’s back up a whole bunch of steps and figure out why this is something that needs to be decided on.
If you have inline elements that wrap onto newlines (like the current transcript fragments in our interactive transcripts) then nail now the appearance can be jarring-but with box-decoration-break we can now say what should happen at those inline break points () we use it to make that break less jarring by applying the inline start and end styles where the break occurs.
Related Speakers
