The break-before CSS property describes how the page, column or region break behaves before the generated box. If there is no generated box, the property is ignored.

  • Initial valueauto
  • Applies toBlock level elements
  • InheritedNo
  • MediaVisual
  • Computed valueSpecified value
  • AnimatableNo
  • CSS VersionCSS2, CSS3
  • JavaScript syntaxobject.style.breakBefore
Formal syntax: auto | always | avoid | left | right | page | column | avoid-page | avoid-column

break-before: [value];
  • autoAllows, meaning neither forbid nor force, any break (either page, column or region) to be be inserted after the principal box.
  • alwaysA page/column/region break is inserted (forced) after the content block.
  • leftForce one or two page breaks right after the principal box so that the next page is formatted as a left page.
  • rightForce one or two page breaks right after the principal box so that the next page is formatted as a right page.
  • rectoForce one or two page breaks right after the principal box so that next page is formatted as a recto page, that is a right page in a left-to-right spread or a left page in a right-to-left spread.
  • versoForce one or two page breaks right after the principal box so that next page is formatted as a verso page, that is a left page in a left-to-right spread or a left right in a right-to-left spread.
  • pageAlways force one page break right after the principal box.
  • columnAlways force one column break right after the principal box.
  • regionAlways force one region break right after the principal box.
  • avoidPrevent any break, either page, column or region, to be inserted right after the principal box.
  • avoid-pageAvoid any page break right after the principal box.
  • avoid-columnAvoid any column break right after the principal box.
  • avoid-regionAvoid any region break right after the principal box.
  • inherit
.class {
   break-before: avoid;
}
?Firefox10+Explorer?Chrome?Safari11.1+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.