Skip to content

Where pages break / box-decoration-break

Why borders disappear when an element splits across pages

box-decoration-break decides whether an element that fragments across a break gets its border and padding applied once across the whole thing (slice) or on each fragment (clone).

What it is for

When a bordered callout splits across a page, slice draws no border on the cut edges, so the box looks broken open. clone closes each fragment, which is almost always what a printed document wants.

Support: Works in a browser-based render

Supported, though the -webkit- prefix is still needed in some engines. It applies to fragmentation across pages and across columns alike.

The syntax

Written the way it would appear in a document stylesheet, using box-decoration-break as intended.

css

.callout,
.quote-block {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6mm;
  /* Each fragment gets its own complete border. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

The mistake people make

Reaching for this when break-inside: avoid was the real answer. If the box should not split at all, stop it splitting rather than making the split look tidier.

Frequently asked

Does box-decoration-break work when generating a PDF?

Works in a browser-based render. Supported, though the -webkit- prefix is still needed in some engines. It applies to fragmentation across pages and across columns alike.

How would I know if it were not working?

You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.

Related properties

Things that come up in the same part of a document stylesheet.

How to stop an element splitting across PDF pagesbreak-inside. Works everywhere.How to force a page break before an element in a PDFbreak-before. Works everywhere.How to keep a heading with the text that follows itbreak-after. Works everywhere.page-break-inside vs break-inside: which should I usepage-break-inside. Works everywhere.How to stop single lines being stranded across PDF pagesorphans and widows. Works everywhere.Every property, with its support statusThe full reference, grouped by what part of the page it touches.

Paste the CSS and see what the rendered page does with it.

Try it live, no signup Try it in the playground