CSS @top-right-corner At-Rule

The CSS @top-right-corner at-rule is used to style the top-right-corner page-margin box in paged media.

The top-right-corner page-margin box is a fixed-size box defined by the intersection of the top and right margins of the page box.

Diagram of the top-right-corner page-margin box highlighted within the page context
Diagram of the page box, with the top-right-corner page-margin box highlighted.

The @top-right-corner rule is one of 16 margin at-rules that can be used inside the @page at-rule when working with paged media (e.g. printed paper, transparencies, photo albums, a browser's "Print Preview" function).

The margin at-rules are responsible for styling the 16 page-margin boxes inside the page context. These page-margin boxes allow you to add generated content and styles around the outside of the page box. This can be useful for generating headers and footers that contain the document title, page numbers, etc.

The @top-right-corner at-rule allows you to apply styles and generated content specifically to the top-right-corner page-margin box.

Each page-margin box has its own margin, border, padding and content areas. You can adjust these properties as required.

Official Syntax

Here's the official syntax for the @top-right-corner at-rule:

What this means is that it accepts a list of normal CSS declarations inserted between curly brackets (just like any other CSS declaration).

However, there are some properties that can't be used with @top-right-corner (or any other margin at-rule). Margin at-rules can only accept page-margin properties.


Here's a basic code example:

This example first sets the page size and margin for the page context. It then uses the @top-right-corner rule to identify the page-margin box at the top right corner, and generate the page number, preceded by the text "Page ".

Notice that the @top-right-corner rule is nested inside the @page rule. This is because margin-at rules go inside the page context (which is created by the @page at-rule). The page-margin boxes are themselves said to be in the margin context.

Also notice that the @top-right-corner rule follows the declarations in the page context. This is recommended to ensure that legacy clients handle the declarations correctly.

Page Orientation

It doesn't matter whether you're printing a page in landscape or portrait orientation. The page-margin boxes are independent of page orientation.

Therefore, top-right-corner is in the same position in both portrait and landscape orientation.

Default Alignment

By default, the alignment on the top-right-corner page-margin box is set to:

However, you can use the text-align and vertical-align properties to change this if required.

Page-Margin Properties

Not all CSS properties will work on page-margin boxes, but there is a large list of properties that can be used on any page-margin box.

Supported properties include properties for specifying backgrounds, colors, alignment, generated content, text direction, and more.

Here's a list of page-margin properties that are applicable to page-margin boxes.

Official Specifications