What You’ll Learn

The page-break-before property controls page breaks before an element when a document is printed. It is especially useful for reports, invoices, books, and any printable layout where each chapter or section should start on a new page.

Introduction

The page-break-before property in CSS is used when printing a document. It specifies whether a page break should occur before a particular element.

This property is useful for creating documents with well-defined sections or chapters, ensuring that specific elements start on a new page when printed.

Definition and Usage

The page-break-before property can be applied to block-level elements when you need that element to start on a new printed page. For example, you can force each new section heading to begin on a fresh page in a report or manual.

Like other print properties, page-break-before usually has little or no visible effect on a normal scrolling screen layout. Test your rules in the browser’s print preview to see the real result.

📝 Syntax

The syntax for the page-break-before property is straightforward. It can be applied to block-level elements, and it takes one of several keyword values.

element {
  page-break-before: value;
}

Basic Example

h1 {
  page-break-before: always;
}

Syntax Rules

• Apply page-break-before to block-level elements such as headings, sections, and divs.
• The value is a keyword: auto, always, avoid, left, or right.
• The property is not inherited — set it on the element where the break should occur.
• Use inside @media print when you only want breaks when printing.
• For new projects, consider the modern break-before property as a replacement.

🎯 Default Value

The default value of the page-break-before property is auto. This means the page break behavior is determined by the browser.

💎 Property Values

The page-break-before property accepts keyword values that control page-break behavior before an element when printing.

When Does page-break-before Matter?

page-break-before only affects paginated output. These are the most common use cases:

• Reports and invoices — Start each major section on a new printed page with page-break-before: always.
• Books and manuals — Break before section headings so each chapter begins cleanly.
• Readable grouping — Use avoid to prevent awkward page breaks immediately before headings.
• Duplex printing — Use left and right when odd and even pages need specific facing-page layout.

On a normal scrolling web page, you may not see any effect — that is normal. Test in print preview to verify behavior.

Examples Gallery

Start with the reference section example, try forced breaks before chapters, prevent awkward breaks, and explore left/right facing-page rules.

<style>
  h1 {
    page-break-before: always;
  }
</style>

<h1>Section 1</h1>
<p>This is the first section of the document.</p>

<h1>Section 2</h1>
<p>This is the second section of the document, and it starts on a new page when printed.</p>

<style>
  .chapter-start {
    page-break-before: always;
  }
</style>

<h1>Report Introduction</h1>
<p>Opening content for the report.</p>

<section class="chapter-start">
  <h2>Chapter 1</h2>
  <p>This chapter starts on a new page when printed.</p>
</section>

<style>
  @media print {
    h2 {
      page-break-before: avoid;
    }
  }
</style>

<h1>Avoid break example</h1>
<p>Introductory paragraph at the end of a page.</p>
<h2>Section Title</h2>
<p>The browser tries not to insert a page break immediately before this heading.</p>

@media print {
  .chapter-opener {
    page-break-before: right;
  }

  .appendix-start {
    page-break-before: left;
  }
}

page-break-before vs break-before

page-break-before is the legacy print property. The modern replacement is break-before, which also supports column and region breaks.

In legacy stylesheets, page-break-before: always is equivalent to break-before: page. When writing new CSS, prefer break-before for better long-term support.

/* Legacy */
h1 {
  page-break-before: always;
}

/* Modern equivalent */
h1 {
  break-before: page;
}

💡 Best Practices