Home / CSS tools / PX to REM converter

PX to REM Converter

Turn pixel sizes into rem values, one at a time, as a list, or by pasting a whole block of CSS.

Convert a block of CSS

Convert a list of values

Quick reference

The formula

rem = px / root font size
24px / 16px = 1.5rem
14px / 16px = 0.875rem

Divide the pixel value by the root font size. With the browser default of 16px, divide by 16. If your CSS sets a different root, enter it above.

Convert a block of CSS

Paste a stylesheet or a rule into the CSS box and every value written in px is converted to rem using your root size. Values at or below the limit you set, 1px by default, stay as px, which suits borders and hairlines. Lines containing an @media rule are left unchanged, because rem in a media query is measured against the browser default size, not your html font size.

What to convert and what to keep

  • Convert: font sizes, line spacing, padding, margins, gaps and container widths.
  • Often keep as px: borders, outlines, box shadows and other fine details.

Quick reference at 16px

  • 8px = 0.5rem
  • 10px = 0.625rem
  • 12px = 0.75rem
  • 14px = 0.875rem
  • 18px = 1.125rem
  • 20px = 1.25rem
  • 24px = 1.5rem
  • 32px = 2rem

To go back to pixels, use the rem to px converter. For ready-made spacing and type scales, try the rem calculator. If you are weighing the two units, read px vs rem. For text that scales with the screen, use the clamp rem converter.

Frequently asked questions

How do I convert px to rem?

Divide the pixel value by the root font size. At 16px, 24px is 1.5rem.

What is 10px in rem?

At a 16px root, 10px is 0.625rem.

Should I convert 1px borders to rem?

Usually not. A 1px border is meant to be a fine line, so many developers keep borders in px.

Does the CSS converter change anything else?

Only numbers followed by px are converted. Everything else in your CSS stays exactly as it was.