CSS bleed Property

The CSS bleed property specifies how far the printable content extends past the edge of the page box, into the area that gets trimmed away when a page is cut to its final size. It is part of the CSS Paged Media module, so it only matters when you generate a physical or PDF page — it does nothing on a normal web screen.

@page {
  marks: crop;
  bleed: 5mm;
}

This property is a shorthand: it sets the bleed amount on all four edges at once, equivalent to setting bleed-top, bleed-right, bleed-bottom, and bleed-left individually.

What "bleed" means in printing

In print production, bleed is artwork that intentionally runs off the edge of the page. Cutting machines have a small margin of error, so designers extend background colors and images a few millimeters beyond the trim line. After the sheet is printed, it is trimmed down to the final size — and because the ink already reached past the cut, there are no thin white slivers along the edges.

The bleed property tells the print engine how big that extra margin should be. It places the page box on a larger sheet and lets content spill into the surrounding bleed area, where the crop marks (set with the marks property) show the cutter where to trim.

Syntax

bleed: auto | <length>;

The property takes one of two value types:

• auto — the browser decides. It computes to 6pt when marks: crop is in effect, and to 0 otherwise.
• <length> — an explicit distance (for example 3mm, 0.125in, 9pt) that the bleed area extends outward in every direction past the page box.

The marks dependency

bleed only takes effect when crop marks are turned on. Without marks: crop, the page is trimmed to its declared size and there is nowhere for the bleed area to live, so the value computes to 0.

/* No effect: marks are off, so bleed computes to 0 */
@page {
  bleed: 5mm;
}

/* Works: crop marks define the trim line, bleed extends past it */
@page {
  marks: crop;
  bleed: 5mm;
}

Examples

A standard print-ready setup with a common 3 mm bleed:

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

Letting the browser pick the default bleed once crop marks are present (resolves to 6pt):

@page {
  marks: crop;
  bleed: auto;
}

For background art to fill the trimmed page edge-to-edge, the element must also reach into the bleed area, not just the page box:

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

body {
  margin: 0;
  background: #1f6feb; /* extends to the page edge so it survives trimming */
}

Values

When would I use this?

Reach for bleed only when you are producing print-quality output — books, flyers, business cards, or any PDF that a print shop will trim. For everyday web layout it is irrelevant; control on-screen page breaks with page-break-before, page-break-after, and page-break-inside instead, and target print styles with media queries.

Browser Support

Support for paged-media properties like bleed is limited. It is implemented mainly in dedicated print/PDF engines (such as Prince, WeasyPrint, and Antenna House) and partially in Safari, but it is not widely supported for live screen rendering in mainstream browsers. When precise bleed control matters, generate the document with a print-focused engine rather than relying on a browser's built-in print.

Practice