When HTML content wraps across lines, the visual results are usually fairly predictable: underlined text remains underlined, regardless whether every word appears on the same line, or broken across multiple lines. But as a site uses more and more CSS and decoration, the effects of styles on elements become harder to predict, especially as the browser window narrows. For example, the following markup:

<h1>Don’t forget to take your soma</h1>

With the following CSS declaration:

h1 {
    padding: 2rem;
    border-radius: 4rem;
    border: 5px double #fff;
    background: #111;
    color: #fff;
    text-align: center;
}

…you can see the effect of a narrower browser window:

Decorated heading text content breaking across multiple lines

As you can see, the border-radius wraps completely around the newly-wrapped text. But this is what happens to a block element: what if we apply the same effect to an inline tag like <span>?

<p>The robot said <span>Don’t forget to take your soma</span>

With similar CSS:

span {
    border-radius: 2rem;
    border: 1px solid;
    padding: 0 1rem;
}

If the dialog breaks across lines, the result is the following:

Decorated inline text breaking across multiple lines

This might be acceptable in your design, but it can also look very strange in some circumstances. There is another option; if we add box-decoration-break and a value of clone:

span {
    box-decoration-break: clone
}

As the name suggests, clone replicates the visual effect across multiple lines, breaking the decoration into fragments and applying the same effect to each:

Decorated inline text breaking across multiple lines

At a practical level, box-decoration-break (spec) is only needed for a few kinds of decoration on inline elements: border-radius, border-image and box-shadow. Note that the breaking of text into individual fragments may mean that any background-image applied to the text may repeat, despite an application of background-repeat: no-repeat.

Support

Support for box-decoration-break is surprisingly good: Firefox has excellent support, as do all Webkit-based browsers (with the provision that the property does not work across column or page breaks in Chrome, Safari and Opera). Unfortunately there’s no support yet in IE / Edge, although the team is aware of the lack.

Conclusion

While the application of box-decoration-break may be rare, it can be a lifesaver in certain design situations, particularly for responsive pages, and deserves to be in the toolbox of every web developer.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.