CSS page-break-before Property

The page-break-before property defines page break before the element.

This property cannot be used on an empty <div> or on absolutely positioned elements.

The page-break-before property is replaced by break-before property.

Generally, page breaks are applied to such paged media, as printed books or documents. After breaking a page, the layout finishes on the current page and the elements of the document that remain continue on the next page. You can often meet this in PDF documents.

With the help of the page-break-before property you can define on what page (right or left) the following content must restart. You can use the CSS @media rule to define break styles for printed documents.

Initial Value auto
Applies to Block-level elements.
Inherited No.
Animatable No.
Version CSS2
DOM Syntax object.style.pageBreakBefore = "Left";

Syntax

page-break-before: auto | always | avoid | left | right | initial | inherit;

Use the code example below to define page break before the element:

@media print {
  h2 {
    page-break-before: right;
  }
}

Values

Value Description
auto Allows any automatic page break before the element.
avoid Avoids to insert any page break before the element.
always Forces to insert any page break before the element.
left Insert a page break before the element so that the next page is formatted as a left page.
right Insert a page break before the element so that the next page is formatted as a right page.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Browser support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.2+ 7.0+

Practice Your Knowledge

What is the function of the 'page-break-before' property in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?