CSS marks

The CSS marks property is used to set crop marks and cross marks on paged media. This is used with the @page rule.

This property can be valuable if you intend to print anything where the image needs to bleed to the edge, or if using a 4 color printing process.


@page: { marks: <value> }

Possible Values

  • crop
  • cross
  • none

Here's an explanation of the crop and cross values:

  • If crop is chosen, this determines where the page should be cut. This is essential if you want the printed image to extend right to the edge of the page. Normally the margin prevents the image from reaching the edge of the page. Using crop marks enables us to print the image using a large piece of paper than the final image will be. Then using crop marks (outside of the image area), we know exactly where to cut the sheet. To assist in this, the image should 'bleed' past the intended edge. This prevents any accidental white gaps near the edge.
  • If cross is chosen, this results in cross marks that assist in aligning printed sheets. This is essential when using a traditional 4 color print process, where each sheet needs to go through the printer 4 times (once for each colour). Cross marks assist the printer in aligning these sheets so that each layer of color is precisely above the previous layer. This results in a sharper print job.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

Represents the value specified as the property's initial value.
Represents the computed value of the property on the element's parent.
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.


Initial Value
Applies To
Paged media
Visual, Paged

Example Code

@page: { 
  marks: crop;