CSS bleed Property
The CSS bleed property is for defining space outside of the page box boundary when defining the size of a printed page. Learn with W3docs tutorial.
The bleed CSS property specifies the extent of the page bleed area outside the page box.
This property is a shorthand for bleed-top, bleed-right, bleed-bottom, and bleed-left.
It only takes effect when the marks property is set to crop (e.g., @page { marks: crop; }).
It accepts two values: auto and length. If marks is crop, auto computes to 6pt. Otherwise, it computes to 0. The length value specifies how far outward, in each direction, the bleed area extends past the page box.
| Initial Value | auto |
|---|---|
| Applies to | @page rules |
| Inherited | No |
| Animatable | No |
| Version | CSS Paged Media Module Level 3 |
| DOM Syntax | N/A |
Syntax
Syntax of CSS bleed Property
bleed: auto | length;The bleed property only affects printed output and has no effect on screen media.
Use the code example below of the bleed property to see the result:
Example of CSS bleed Property
@page {
bleed: 1cm;
}Values
| Value | Description |
|---|---|
auto | Computes to 6pt if marks is crop. Otherwise, it computes to 0. |
length | Specifies how far outward, in each direction, the bleed area extends past the page box. |
Browser Support
Support for paged media properties like bleed is limited. It is primarily implemented in print preview engines and Safari, but is not widely supported in other browsers for live screen rendering.
Practice
What is the correct usage and function of bleed in CSS?