CSS @right-bottom At-Rule
The @right-bottom at-rule defines a page-margin box along the lower part of the right edge of a printed page. Nested inside @page, it can display generated text, page numbers, or other margin content in paged media.
Syntax
The rule must be nested within @page. The content property determines what is displayed in the right-bottom margin box.
@page {
margin: 20mm;
@right-bottom {
content: "Draft";
}
}How @right-bottom Works
The right margin is divided into top, middle, and bottom boxes. @right-bottom occupies the lower part of that side margin. Increasing the right page margin provides space for its content.
@page {
margin-right: 25mm;
@right-bottom {
content: "CONFIDENTIAL";
font-size: 9pt;
}
}Related Page Margin Boxes
The three right-side boxes occupy different positions along the right margin. They are separate from @bottom-right, which sits along the bottom edge of the page.
@page {
margin: 20mm;
@right-top {
content: "Report";
}
@right-middle {
content: "Review";
}
@right-bottom {
content: "2026";
}
}Page Counters
The page counter supplies the current printed page number. The pages counter can supply the total number of pages when supported.
@page {
margin: 20mm 25mm 20mm 20mm;
@right-bottom {
content: "Page " counter(page);
font-size: 9pt;
}
}Using Page Selectors
Page selectors can give left- and right-hand pages different margin content. Printing behavior can depend on browser and printer settings.
@page :right {
@right-bottom {
content: "Right-hand page";
}
}
@page :left {
@right-bottom {
content: none;
}
}@right-bottom Example
Open Print Preview to see the current page number near the bottom of the right page margin. The rule does not produce an on-screen margin box.
@page {
size: A4;
margin: 20mm 25mm 20mm 20mm;
@right-bottom {
content: "Page " counter(page);
font: 9pt Arial, sans-serif;
color: #555;
}
}
@media print {
body {
color: #000;
}
}Browser Support: Support varies by browser version; Chromium 131 and later support page margin boxes. Test with Print Preview. Can I Use?
Specifications
@right-bottom At-Rule is described in CSS Paged Media Module Level 3. Consult the specification for normative syntax and behavior.