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;
}
}The @right-bottom margin box occupies the lower portion of the right page margin. It is declared inside @page and generates content in printed pages, not in the ordinary screen layout.
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";
}
}Use the content property for page numbers, short labels, or running information. The printed page must have enough right margin to accommodate the content without crowding the document.
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?
Page-margin boxes do not display in normal browser view. Verify alignment, clipping, and page numbering using print preview or a PDF export.
Specifications
@right-bottom At-Rule is described in CSS Paged Media Module Level 3. Consult the specification for normative syntax and behavior.