CSS @top-right At-Rule
The @top-right at-rule defines generated content in the top-right margin box of printed pages. It is written inside @page and is useful for running headers, dates, or section labels.
@top-right Syntax
@page {
margin: 20mm;
@top-right {
content: "October 2026";
font-size: 10pt;
}
}The example shows the rule in context. Page-margin at-rules must be nested inside @page.
How @top-right Works
The top-right box is positioned along the upper margin between the top-center and top-right-corner regions. It does not occupy the main page content area.
The @top-right margin box appears at the right side of the top page margin, often for page numbers or running section titles.
Running Headers
Use the content property for a fixed label or supported generated content. The text can be styled with font properties and alignment declarations.
@page :first {
@top-right {
content: "First page";
}
}The counter(page) function can provide page numbers. Page selectors can alter the header on the first page or on named pages.
Different Headers on Different Pages
A nested @top-right inside @page :first or @page :right can create different running headers for selected printed pages.
@top-right Example
This print example places a label in the top right margin box. Open the browser print preview to inspect the result; ordinary screen rendering does not display page-margin boxes.
@page {
margin: 20mm;
@top-right {
content: "October 2026";
font-size: 10pt;
}
}Browser Support
Page-margin boxes are supported in current major browsers, but older browsers and print engines may differ. Confirm the printed result using Print Preview. See Can I Use? and search for the relevant feature.
Check how the text fits alongside other top margin boxes, especially on narrow printed pages.
Specifications
The @top-right margin at-rule is defined in CSS Paged Media Module Level 3 as one of the page-margin boxes that may appear within an @page rule.