page-break-before

The page-break-before CSS property adjusts page breaks before the current element.

This property applies to block elements that generate a box. It won't apply on an empty <div> that won't generate a box.

/* Keyword values */
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/* Global values */
page-break-before: inherit;
page-break-before: initial;
page-break-before: unset;

Syntax

Values

auto

Initial value. Automatic page breaks (neither forced nor forbidden).

always

Always force page breaks before the element.

avoid

Avoid page breaks before the element.

left

Force page breaks before the element so that the next page is formatted as a left page.

right

Force page breaks before the element so that the next page is formatted as a right page.

recto

If pages progress left-to-right, then this acts like right. If pages progress right-to-left, then this acts like left.

verso

If pages progress left-to-right, then this acts like left. If pages progress right-to-left, then this acts like right.

Page break aliases

The page-break-before property is now a legacy property, replaced by break-before.

For compatibility reasons, page-break-before should be treated by browsers as an alias of break-before. This ensures that sites using page-break-before continue to work as designed. A subset of values should be aliased as follows:

Formal definition

Formal syntax

auto | always | avoid | left | right | recto | verso

Examples

Avoid a page break before an element

/* avoid page break before div elements of class note */
div.note { 
    page-break-before: avoid;
} 

Specifications

Browser compatibility

See also

• break-before, break-after, break-inside
• page-break-after, page-break-inside
• orphans, widows