CR80 card size in pixels, mm and inches: a developer's cheat sheet

Sooner or later someone asks you to build a membership card preview, a gift card mockup or a "download your staff ID" feature. The first question is always the same: how big is a card, really? The answer is more precise than "about 86 by 54", and getting it slightly wrong is how you end up with artwork that gets cropped at the printer.

This is the reference I wish I'd had: the numbers, the pixel maths, and copy-paste snippets.

The numbers

A standard plastic card (bank card, loyalty card, ID badge) is the ID-1 format from ISO/IEC 7810. The printing industry calls it CR80.

Aspect ratio: 85.60 / 53.98 ≈ 1.586 : 1 (or 0.6306 the other way round). That's close to the golden ratio (1.618) but not equal to it, so don't reach for 1.618 as a shortcut.

You'll see 3.375 in quoted for the width in some printer drivers and US templates. That's 85.725 mm, a rounded imperial figure, not the ISO value. The difference is about 0.1 mm, which doesn't matter for a screen mockup, but use 85.60 mm when you're generating print files.

Bleed and safe area

Printed cards are cut from larger sheets, and the cut can drift slightly. Two margins handle that:

• Bleed: background colour and images extend past the trim line, commonly 2–3 mm on each side, so a slightly off cut doesn't leave a white sliver.
• Safe area: text and logos stay at least ~3 mm inside the trim line so a slightly off cut doesn't clip them.

With 3 mm bleed on every side, the artwork canvas is 91.60 × 59.98 mm (3.606 × 2.361 in). Always confirm which bleed the printer wants; 2 mm and 3 mm are both common.

Pixel sizes

Pixels = mm ÷ 25.4 × DPI. Rounded to whole pixels:

On screen, CSS treats 1 in as 96 px, so a "true size" card is about 323.5 × 204 CSS px. That's only physically accurate if the display and zoom happen to cooperate, which they usually don't (more on that below).

Note the rounding: 637.56 px rounds up to 638. If you build a 1011 × 637 canvas, you've quietly changed the aspect ratio. Keep the mm values as your source of truth and derive the pixels from them.

CSS: a card that scales

Percentage border-radius is calculated separately against width and height, so border-radius: 3.7% gives you slightly elliptical corners on a non-square box. Drive everything from one width variable instead:

.card {
  --w: 340px;                       /* any width you like */
  width: var(--w);
  aspect-ratio: 85.6 / 53.98;
  border-radius: calc(var(--w) * 3.18 / 85.6);
  overflow: hidden;
  background: linear-gradient(135deg, #12355b, #1f8a8a);
  color: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
}

.card__safe {
  /* 3 mm safe margin, expressed relative to card width */
  position: absolute;
  inset: calc(var(--w) * 3 / 85.6);
}

Make .card position: relative if you use the safe-area box for layout. For a print stylesheet you can use real units:

@page { size: 85.6mm 53.98mm; margin: 0; }
.card--print { width: 85.6mm; height: 53.98mm; border-radius: 3.18mm; }

Chromium honours @page size; check your target browser before relying on it.

SVG: millimetres as user units

SVG is the most honest format for this, because you can make one user unit equal 1 mm:

<svg xmlns="http://www.w3.org/2000/svg"
     width="91.6mm" height="59.98mm" viewBox="-3 -3 91.6 59.98">
  <!-- bleed area: background runs to the outer edge -->
  <rect x="-3" y="-3" width="91.6" height="59.98" fill="#12355b"/>
  <!-- trim line (rounded corners) -->
  <rect x="0" y="0" width="85.6" height="53.98" rx="3.18"
        fill="none" stroke="#e33" stroke-width="0.2" stroke-dasharray="1 1"/>
  <!-- safe area -->
  <rect x="3" y="3" width="79.6" height="47.98"
        fill="none" stroke="#3c3" stroke-width="0.2"/>
</svg>

The negative viewBox origin puts (0, 0) on the trim corner, so all your layout coordinates are measured from the card edge, the same way a printer measures them. Remember to strip the guide rectangles before exporting the final file.

Canvas: export at print resolution

For a downloadable PNG, render at 300 DPI regardless of the user's screen:

const MM = 300 / 25.4;               // px per mm at 300 DPI
const W = 85.6, H = 53.98, BLEED = 3;

const canvas = document.createElement('canvas');
canvas.width  = Math.round((W + BLEED * 2) * MM);   // 1082
canvas.height = Math.round((H + BLEED * 2) * MM);   // 708
const ctx = canvas.getContext('2d');

ctx.scale(MM, MM);                   // now draw in millimetres
ctx.translate(BLEED, BLEED);         // (0,0) = trim corner

ctx.fillStyle = '#12355b';
ctx.fillRect(-BLEED, -BLEED, W + BLEED * 2, H + BLEED * 2);

ctx.fillStyle = '#fff';
ctx.font = '4px system-ui';          // 4 mm font size (units are mm now)
ctx.fillText('MEMBER NAME', 3, H - 6);   // inside the 3 mm safe area

canvas.toBlob(b => {/* download b */}, 'image/png');

For an on-screen preview, use ctx.roundRect(0, 0, W, H, 3.18) as a clip to show the rounded corners. Don't bake the rounding into a print file, though: the corners are die-cut, and the printer wants square artwork.

Common mistakes

1. Using business card size. 3.5 × 2 in (88.9 × 50.8 mm) and the European 85 × 55 mm are paper business cards, not CR80. The aspect ratio is different, so artwork gets stretched or cropped.
2. Rounding to 86 × 54. Fine for a quick UI sketch, but not for print files.
3. No bleed. Backgrounds that stop exactly at the trim line give white edges.
4. Text hugging the edge. Anything within ~3 mm of the trim is at risk.
5. 72 DPI exports. A 324 × 204 px PNG looks fine on screen and prints soft. Export at 300 DPI minimum.
6. Ignoring card features. Magnetic stripes, contact chips, signature panels and slot punches each cover part of the card. Keep important detail out of those zones.
7. Trusting CSS mm on screen. 85.6mm in CSS is 323.5 px at the CSS reference of 96 px per inch, not a physical measurement. If "actual size" matters, add a calibration step (for example, ask users to hold a real card against the screen and drag a slider).
8. Sending rounded corners or guide lines. Remove all guides before export.

Checking your output

If you're generating card artwork in an app, it helps to drop the exported file over a template with the trim, bleed and safe lines drawn in. A free CR80 artwork checker does exactly that in the browser (files aren't uploaded), and if you just need a quick starting design to test your pipeline with, there's a free online card designer as well.

TL;DR

• CR80 = 85.60 × 53.98 mm = 3.370 × 2.125 in, corners ~3.18 mm, ratio 1.586.
• 300 DPI: 1011 × 638 px (card), 1082 × 708 px (with 3 mm bleed).
• 600 DPI: 2022 × 1275 px (card), 2164 × 1417 px (with 3 mm bleed).
• Keep mm as the source of truth, keep text 3 mm inside, run backgrounds 3 mm outside.