Skip to content
Related Articles

Related Articles

Improve Article
CSS | @page rule
  • Last Updated : 22 Aug, 2019

The CSS @page rule defines the dimension of the page which is gonna be print. There are few important things should be under control when you want to print a web page those are listed below:

  • The page size, orientation, margins, border, and padding.
  • Page breaks.
  • Headers and footers.
  • Page counters.
  • Orphans.

All the above things are controllable when you follow the @page rule.


@page [:left | :right | :first] {
    /* print-specific rules */

Page Descriptor: There are three Descriptor in @page rule those are:

  • size: Specify the size of page box’s containing block.

    @page {
          size: A4;
  • marks: It helps to trim the page that you want to print.

    @page {
          marks: crop cross;
  • bleed: It extend the bleed area of the box

    @page {
          bleed: 7pt;


<!DOCTYPE html>
<html lang="en">
<title>CSS @page rule</title>
<style type="text/css">
    /* default for all pages */
    @page {
        margin: 2in;    
    /* margin on left page */
    @page :left {
        margin: 1in;    
    /* margin on right page */
    @page :right {
        margin: 3in;    
    /* top margin on first page */
    @page :first {
        margin-top: 5in;    
    <h2>CSS Page At-rule</h2>
     If you open output in a new window and print the page
     the margin around the text content appears differently
     than it appears on the screen.

Output: When you choose to print the output screen of the above code.

Supported Browsers: The browsers supported by CSS @page rule are listed below:

  • Google Chrome 2.0
  • Interenet Explorer 8.0
  • Safari 5.1
  • Opera 6.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :