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:

Don't forget to take your soma 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:

Don't forget to take your soma 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:

Don't forget to take your soma 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 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.


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.