Break the box nicely

Imagine you have some text on your page and you want to highlight it. So, you add a nice rounded border and a background color. But what happens when the text wraps to multiple lines?

The background and border styling break across lines—and it doesn’t look great.

Luckily, we have a neat little trick called box-decoration-break. It can be set to either slice (the default) or the magic value, clone. This makes the styling apply to each line individually.

span {
  box-decoration-break: clone;
}

See the Pen Untitled by Jessica Skårbratt (@jessicaskarbratt) on CodePen.

You’ll run into a similar issue if you’re designing with multi-column layouts and your content breaks across columns. A container with a background color might span multiple columns, which breaks the visual flow.

One solution is to prevent breaks entirely using:

.container {
  break-inside: avoid;
}

This forces the whole container into the next column. But another option is to allow the break and keep the styling on each column segment. In some cases this is the better choice.

See the Pen Untitled by Jessica Skårbratt (@jessicaskarbratt) on CodePen.

So next time your styling breaks when the layout shifts, play around to find the best fit for your use case!