@page CSS At-Rule

Description

The CSS @page at-rule is used to apply styles to printed pages. It can be used to control the page size, orientation, margins, borders, and padding, as well as page breaks, headers and footers, and page counters.

The @page at-rule can be used to target all pages in a print-out or a subset using its various pseudo-classes. For example, the :first pseudo-class can be used to target the first page of a print-out, and the :left and :right pseudo-classes can be used to target the left and right pages of a two-sided print-out.

Syntax

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

Values

• 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.

Example

@page: left {

   margin-left: 4cm;

   margin-right: 2cm;

}

@page: right {

   margin-left: 2cm;

   margin-right: 4cm;

}

Browser Support

The following table will show you the current browser support for the at-rule @page.

Desktop
12	2	19	6	13.1

Tablets / Mobile
18	19	14	13.4	1	37

Last updated by CSSPortal on: 30th September 2023