CSS Bleed Property for Print Trim Margins

The CSS bleed property defines the distance that content extends beyond the cut line of a physical page box to accommodate mechanical variations during commercial printing. When paired with the @page at-rule and crop marks, it ensures that background colors, images, and full-bleed graphics run seamlessly to the very edge of the trimmed sheet without leaving unsightly white borders. This article explains how the bleed property operates within the CSS Paged Media specification, its interaction with page geometry and crop marks, and how to implement it correctly for commercial print workflows.

The Role of Bleed in Commercial Printing

In commercial print production, documents are printed on paper larger than the intended final dimensions and trimmed down using mechanical guillotines. Because cutting blades can shift fractions of a millimeter during high-speed runs, any artwork intended to touch the edge of the finished sheet must physically extend past the trim line. This extra margin is the bleed. Without a configured bleed area, minor alignment inaccuracies expose the unprinted white paper beneath.

Syntax and Values

The bleed property is defined within the CSS Paged Media Module Level 3 specification and is valid only within the @page at-rule context.

@page {
  bleed: auto | <length>;
}
  • <length>: A specific measurement defining how far the bleed box extends outward from the page box (trim edge). Common units include millimeters (mm), inches (in), or points (pt). The commercial printing industry standard is typically 3mm or 0.125in (1/8 inch).
  • auto: The user agent determines the bleed distance. If crop marks are enabled (marks: crop), the default value typically resolves to 6pt (approximately 2.12mm). If no crop marks are enabled, it resolves to zero.

Interaction with the marks Property

The bleed property is designed to function alongside the marks property. When generating a press-ready PDF, print engines need both the trim indicator and the extra bleed area:

@page {
  size: 8.5in 11in;
  margin: 0.5in;
  marks: crop cross;
  bleed: 0.125in;
}

In this setup:

  1. The Page Box (trim box) is sized to 8.5 by 11 inches.
  2. The Bleed Box expands outward by 0.125in on all four edges, making the physical rendered canvas 8.75 by 11.25 inches.
  3. The Crop Marks (marks: crop) are drawn outside the trim edge to instruct the bindery where to cut.
  4. The Cross Marks (marks: cross) assist with multi-plate color registration.

The Paged Media Box Model

The CSS print box model nests areas from inside to outside as follows:

  1. Page Area: Contains the content and adheres to standard element layout rules.
  2. Margin Area: Surrounds the page area and handles running headers, footers, and margins.
  3. Trim Box (Page Box): Represents the intended dimensions of the final cut paper.
  4. Bleed Box: Surrounds the trim box by the distance declared in bleed.
  5. Sheet (Canvas): Accommodates the bleed area, crop marks, color bars, and printer job metadata.

Elements assigned to bleed off the page—such as full-bleed hero covers or colored chapter dividers—must extend past the page margin to the boundary of the bleed box.

Implementation Example

Below is a complete implementation defining a standard A4 commercial document with background elements styled for full bleed:

@page {
  size: A4;
  margin: 20mm;
  bleed: 3mm;
  marks: crop;
}

@page :left {
  @bottom-left {
    content: counter(page);
  }
}

@page :right {
  @bottom-right {
    content: counter(page);
  }
}

/* Full-bleed cover page */
@page :first {
  margin: 0;
  background-color: #1a1a1a;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

When applied to the first page, setting margin: 0 allows the background to fill the trim box completely, while the defined 3mm bleed ensures the renderer pushes background fills into the bleed boundary.

Engine Support and Compatibility

Standard consumer web browsers (such as Google Chrome, Mozilla Firefox, and Apple Safari) offer limited native support for advanced print properties like bleed and marks. They typically crop print output directly to the chosen page size within standard system print dialogs.

The bleed property is fully supported by dedicated HTML-to-PDF print engines and paged media polyfills designed for automated publishing, including:

  • Paged.js: An open-source polyfill that renders paged media directly in the browser for print previewing.
  • PrinceXML: A commercial engine specialized in converting HTML/CSS into press-ready PDFs.
  • WeasyPrint: A Python-based rendering engine supporting CSS Paged Media standards.
  • Antenna House Formatter: An enterprise print formatting engine supporting advanced layout specifications.