Web/CSS/@page

The @page CSS at-rule is used to modify some CSS properties when printing a document.

Syntax

@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

Descriptors

size: Specifies 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.

marks: Adds crop and/or registration marks to the document.

bleed: Specifies the extent beyond the page box at which the page rendering is clipped.

Description

You can't change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

The @page at-rule can be accessed via the CSS object model interface CSSPageRule.

Note: The W3C is discussing how to handle viewport-related <length> units, vh, vw, vmin, and vmax. Meanwhile do not use them within a @page at-rule.

Formal syntax

@page <page-selector-list> {
  <page-body>
}where <page-selector-list> = [ <page-selector># ]?<page-body> = <declaration>? [ ; <page-body> ]? | <page-margin-box> <page-body>where <page-selector> = <pseudo-page>+ | <ident> <pseudo-page>*<page-margin-box> = <page-margin-box-type> '{' <declaration-list> '}'where <pseudo-page> = : [ left | right | first | blank ]<page-margin-box-type> = @top-left-corner | @top-left | @top-center | @top-right | @top-right-corner | @bottom-left-corner | @bottom-left | @bottom-center | @bottom-right | @bottom-right-corner | @left-top | @left-middle | @left-bottom | @right-top | @right-middle | @right-bottom

Examples

@page pseudo-class examples

Please refer to the various pseudo-classes of @page for examples.

Specifications

Specification	Status	Comment
CSS Logical Properties and Values Level 1The definition of ':recto and :verso' in that specification.	Editor's Draft	Adds the `:recto` and `:verso` page selectors
CSS Paged Media Module Level 3The definition of '@page' in that specification.	Working Draft	No change from CSS Level 2 (Revision 1), though more CSS at-rules can be used inside a `@page`.
CSS Level 2 (Revision 1)The definition of '@page' in that specification.	Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`@page`	Chrome Full support 2	Edge Full support 12	Firefox Full support 19	IE Full support 8	Opera Full support 6	Safari No support No	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 19	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 1.0
`bleed` descriptor	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`marks` descriptor	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
Page-margin boxes	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`page-orientation` descriptor	Chrome Full support 85	Edge Full support 85	Firefox No support No	IE No support No	Opera Full support 71	Safari No support No	WebView Android Full support 85	Chrome Android Full support 85	Firefox Android No support No	Opera Android Full support 60	Safari iOS No support No	Samsung Internet Android No support No
`size` descriptor	Chrome Full support 15	Edge Full support 79	Firefox No support No	IE No support No	Opera Full support 15	Safari No support No	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android No support No	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 1.5

Legend

Full support: Full support
No support: No support