<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS bleed and marks</title>
<style>
@page {
size: 100mm 100mm;
margin: 10mm;
bleed: 5mm;
marks: cross crop colors;
background: #eeeeee;
@top-center {
border: 1px solid blue;
content: ' ';
}
@bottom-center {
border: 1px solid blue;
content: ' ';
}
@left-middle {
border: 1px solid blue;
content: ' ';
}
@right-middle {
border: 1px solid blue;
content: ' ';
}
@top-left-corner {
border: 1px solid red;
content: ' ';
}
@top-right-corner {
border: 1px solid red;
content: ' ';
}
@bottom-left-corner {
border: 1px solid red;
content: ' ';
}
@bottom-right-corner {
border: 1px solid red;
content: ' ';
}
}
</style>
</head>
<body>
<h1>Page bleed and marks</h1>
<p>Page should have a 10m bleed and marks and color bars</p>
</body>
</html>
