Today I learned about the CSS property box-decoration-break: clone.
I found myself wanting to style some inline text on a page to highlight it with a background for emphasis, but I noticed that when the text wraps onto a new line, the styles for the inline element just kind of… cut off abruptly.
Take a look for yourself with this example, see how the beginning and ends of lines don’t follow the same padding and border-radius as the beginning and end of the full highlighted text:
There’s no great way to apply separate styles to the line break spots, but I just found out about the box-decoration-break property, which you can apply to an inline element with the clone value, ensuring the complete styles are cloned for each instance of text regardless of line breaks, making the text look a bit more consistent:
Now take a look with box-decoration-break: clone applied:
box-decoration-break: clone has pretty great browser support (with prefixes), and there are more examples on MDN to see how it’s useful. TailwindCSS also has a utility class for this, .box-decoration-clone.
