The page-break-before property adjusts page breaks before the current element in print and other paged media. It applies to block-level elements that generate a box.
It is not inherited. The initial value is auto. Pair it with page-break-after and page-break-inside for older print stylesheets.
break-beforepage-break-before is a legacy alias. Use break-before in new CSS. Note: always maps to break-before: page.
page-break-before: auto | always | avoid | left | right | initial | inherit;Some engines also recognize recto and verso. Start with auto, always, and avoid.
| Value | Description | Try it |
|---|---|---|
auto | Default. Neither forces nor forbids a break | Try it |
always | Always force a page break before the element | Try it |
avoid | Avoid a page break right before the element | Try it |
left / right | Force a break so this element starts on a left or right page | Try it |
initial | Resets to auto | Try it |
inherit | Takes the parent’s page-break-before | Try it |
page-break-beforeUse it only for print styles you maintain, or migrate the rule to break-before.
page-break-before: always so that block begins on a new page.break-before: page.| Piece | Required? | Role |
|---|---|---|
| Block-level element | Yes | Must generate a box |
| Paged media | Yes (to see it) | Print Preview or printed output |
| Keyword | Yes | always, avoid, auto, and others |
| Modern replacement | Recommended | break-before: page instead of always |
Screen layout cannot show real print pages. This demo simulates a forced break before the marked block when you choose always, left, or right.
Each snippet focuses on page-break-before. Confirm with Print Preview. Use Try It Yourself for a live editor.
Start each chapter heading on a new printed page.
<style>
h1 {
page-break-before: always;
}
</style>
<p>Intro text.</p>
<h1>Chapter 1</h1>
<p>Starts on a new printed page.</p>h1 gets page-break-before: always.break-before: page.Ask the browser not to put a page break right before a note box.
<style>
.note {
page-break-before: avoid;
}
</style>
<p>Related paragraph.</p>
<div class="note">Keep this with the text above when possible.</div>avoid.always can still create a break.break-before: avoid in new CSS.Leave break decisions to the print layout engine.
<style>
h2 {
page-break-before: auto;
}
</style>
<h2>Heading</h2>
<p>Break only if the page needs one.</p>auto neither forces nor forbids a break.always rule.initial also resolves to auto.If nothing seems to break, one of these is usually why.
Check Print Preview. Normal screen layout usually ignores the visual page split.
always is not modern alwaysAs an alias, page-break-before: always maps to break-before: page, not the broader Level 4 always keyword.
The property applies to block-level elements. If no box is generated, it is ignored.
avoid is not a hard lockBrowsers try to honor it, but forced breaks and constrained page height can still win.
break-before for new workKeep page-break-before only for older stylesheets. New print CSS should use break-before.
page-break-before is a browser print layout property. Node.js, Deno, and Bun do not apply it.
Supported across modern browsers and older Internet Explorer for common print values. Prefer break-before for new CSS.
Bottom line: Safe as a legacy print property. For new projects, use break-before and treat page-break-before as compatibility-only.
auto, always, avoid.auto. Not inherited. Deprecated alias of break-before.always with break-before: page.One line: page-break-before is the old print-before-break control — learn it, then use break-before.
Learn the legacy property that controls breaks inside an element.
8 people found this page helpful