CSS @top-left-corner At-Rule
The @top-left-corner at-rule controls the corner margin box at the upper-left of a printed page. It is a nested page-margin rule inside @page and can display text, counters, or other generated content.
@top-left-corner Syntax
@page {
margin: 20mm;
@top-left-corner {
content: "★";
}
}The example shows the rule in context. Page-margin at-rules must be nested inside @page.
How @top-left-corner Works
The top-left-corner box occupies the intersection of the top and left page margins. It is separate from @top-left, which occupies part of the top margin between corner regions.
The @top-left-corner margin box occupies the upper-left corner where the top and left page margins meet. It can hold a short mark or label.
Corner Decorations
The content property can insert a short label or decorative character. Keep corner content compact to avoid crowding the printable content area.
@page :first {
@top-left-corner {
content: "First page";
}
}The box belongs inside @page, and its generated content should be brief enough to fit the corner region.
Page-Specific Corners
Use page selectors such as :first, :left, and :right when corner content should vary across printed pages.
@top-left-corner Example
This print example places a label in the top left 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-left-corner {
content: "★";
}
}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.
This is a paged-media feature, not a positioning shortcut for ordinary HTML. Confirm the result in print preview.
Specifications
The @top-left-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.