The @page at-rule is used to control the presentation of paged media, such as when a document is printed or exported to a PDF. It allows authors to define layout-related characteristics that apply specifically to individual pages rather than to elements within the document flow. Unlike most CSS rules that target elements on a screen, @page operates at the document level, shaping how each physical or virtual page is structured when content is divided across multiple pages. This makes it especially relevant for print stylesheets, reports, invoices, books, and other long-form documents intended for printing or pagination.

The @page rule plays a key role in defining the physical boundaries and visual behavior of a page. It influences how content is distributed across pages, how margins affect layout flow, and how page boundaries interact with elements such as headers, footers, or page breaks. Because pagination introduces constraints that do not exist in continuous scrolling layouts, @page helps bridge the gap between digital content and traditional print design concepts. It ensures that content remains readable, well-structured, and visually consistent when separated into discrete pages.

The @page at-rule also supports more advanced control through contextual targeting, allowing different page types or sections to follow different layout rules. This is particularly useful for documents that require distinct formatting for covers, title pages, or specific sections. By enabling fine-grained control over how pages are rendered, @page helps authors create polished, professional print outputs that closely match typographic and layout expectations found in traditional publishing.

@page :pseudo-selector {
    /* margins, widows, orphans, and/or page break styles */
}

• sizeSpecifies the target size and orientation of the page box’s containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.
• marksAdds crop and/or registration marks to the document.
• bleedSpecifies the extent beyond the page box at which the page rendering is clipped.

The following information will show you the current browser support for the CSS at-rule @page. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.

This at-rule is supported by all modern browsers.

Desktop

Tablets & Mobile