CSS @top-right-corner At-Rule
The @top-right-corner at-rule defines generated content in the upper-right corner margin box of printed pages. It is nested inside @page and can provide compact corner labels or decorations.
@top-right-corner Syntax
@page {
margin: 20mm;
@top-right-corner {
content: "PDF";
font-size: 9pt;
}
}The example shows the rule in context. Page-margin at-rules must be nested inside @page.
How @top-right-corner Works
The top-right-corner margin box is located where the top and right page margins intersect. It is distinct from @top-right, which occupies a region along the top edge.
The @top-right-corner margin box occupies the intersection of the top and right page margins. It can display a small identifier or short label.
Adding a Corner Label
Use the content property to display a brief label. A sufficient top and right margin helps keep the label from competing with page content.
@page :first {
@top-right-corner {
content: "First page";
}
}Define it within @page. Use content to generate text and reserve enough top and right margin space.
Combining Margin Boxes
Other margin boxes such as @top-left, @top-center, and @bottom-right can be used in the same @page rule to create coordinated printed headers and footers.
@top-right-corner Example
This print example places a label in the top right corner 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-corner {
content: "PDF";
font-size: 9pt;
}
}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.
The box is rendered only for paged output, so print preview is necessary to verify placement.
Specifications
The @top-right-corner 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.