CourtBouillon

Authentic people growing open source code with taste

CSS Tricks: box-decoration-break

When a box is split between multiple pages, do you want do display its top and bottom borders? Sometimes you do… but sometimes you don’t.

Example of an article with borders repeating on page break
An article with borders repeated across page break

As often, CSS has good news for you: box-decoration-break: 

article {
  box-decoration-break: clone;
}

This feature lets you display the borders at the top and the bottom of the box, even when it’s split. Of course, you’ll also keep the padding inside your box.

With the default value, slice, you’ll be able to keep the default behavior that’s more common: keep borders and padding on the left and right sides, but skip them at the top and the bottom of the pages.

Note that at page breaks, split boxes always reach the bottom of the page, even if their content is too small to fill the whole blank space.

And don’t hesitate to try this feature with inline boxes, it works very well too if you want to keep your borders when your text breaks across multiple lines! 

span {
  box-decoration-break: clone;
}
Example of a span with borders repeating on line breaks
A span with borders repeated across multiple lines

Learn more about box-decoration-break: