Page Breaks in EPUB: CSS Properties and How They Work

June 12, 2026  ·  7 min read

EPUB is a reflowable format — there are no fixed pages. But reading systems do paginate content, and CSS gives authors control over where those pagination boundaries fall. This guide covers the CSS properties for EPUB page break control, what actually works across reading systems, and common patterns.

CSS page break properties

Two sets of properties control page breaks in CSS:

Modern CSS (preferred)

/* Force a break before the element */
break-before: page;
break-before: column;
break-before: always;   /* same as 'page' in paged media */

/* Force a break after the element */
break-after: page;
break-after: always;

/* Prevent breaks inside the element */
break-inside: avoid;
break-inside: avoid-page;

Legacy CSS (for compatibility)

/* EPUB 2 / older Kindle support */
page-break-before: always;
page-break-after: always;
page-break-inside: avoid;

For maximum compatibility, include both:

h1.chapter-title {
    page-break-before: always;  /* legacy */
    break-before: page;         /* modern */
    margin-top: 3em;
}

Forcing chapter breaks

The most common use case: every chapter should start on a new "page" in the reading system. Apply to the first element of each chapter document, or to the chapter heading:

Method 1: CSS on the body or section

/* In each chapter's XHTML, or via CSS class */
body {
    page-break-before: always;
    break-before: page;
}

Method 2: EPUB spine + separate XHTML files (recommended)

The most reliable approach is to place each chapter in its own XHTML file in the EPUB spine. Most reading systems automatically start each spine item on a new page, regardless of CSS. This is the standard practice for novels, non-fiction books, and most structured content.

<!-- OPF spine -->
<spine>
  <itemref idref="chapter01"/>  <!-- always starts new page -->
  <itemref idref="chapter02"/>
  <itemref idref="chapter03"/>
</spine>

Method 3: CSS on headings within a single file

If all chapters are in one XHTML file (not recommended for long books), use CSS on the heading:

h1 + * {  /* first element after h1 */
    page-break-before: always;
    break-before: page;
}

/* Or directly on the heading */
h1.chapter-start {
    page-break-before: always;
    break-before: page;
}

Preventing breaks within elements

Preventing a page break from splitting a table, figure, or short code block:

/* Keep table on one page if possible */
table {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Keep figure + caption together */
figure {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Keep heading with the following paragraph */
h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
}

/* Minimum lines before break */
p {
    orphans: 3;  /* at least 3 lines at bottom of page */
    widows: 3;   /* at least 3 lines at top of page */
}

Reading system support

Kindle's CSS support is more limited than other reading systems. For Kindle, the most reliable way to force chapter breaks is separate XHTML files in the spine — CSS-only page breaks can be unreliable.

FAQ

Why doesn't break-before: page work on my Kindle?

Kindle's CSS renderer has historically supported page-break-before: always better than break-before: page. Include both declarations. If the CSS approach still fails on older Kindle firmware, use separate XHTML files per chapter — that's the most reliable approach.

Can I force a page break in the middle of a paragraph?

Not with CSS alone — break-before and break-after apply to block-level elements. To break mid-paragraph, split it into two separate <p> elements and apply break-before to the second.

Does toolkit.bot output include page break CSS?

Yes. EPUBs from toolkit.bot include page-break-before: always and break-before: page on chapter headings, and break-inside: avoid on tables and figures. Each chapter is placed in its own spine document for maximum reading system compatibility.