page-break-before

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Warning: This property has been replaced by the break-before property.

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.

Try it

Syntax

css
/* 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: revert;
page-break-before: revert-layer;
page-break-before: unset;

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. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.

Force page breaks before the element so that the next page is formatted as a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.

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:

page-break-before break-before
auto auto
left left
right right
avoid avoid
always page

Formal definition

Initial valueauto
Applies toblock-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

page-break-before = 
  auto     |
  always   |
  avoid    |
  left     |
  right    |
  inherit

Examples

Avoid a page break before an element

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

Specifications

Specification
CSS Logical Properties and Values Level 1
# page
CSS Paged Media Module Level 3
# page-break-before

Browser compatibility

BCD tables only load in the browser

See also