# PX to REM converter

> Convert pixels to rem and rem to pixels with any root font size, one value or a whole list. Copy the CSS values. Free, runs in your browser.

Canonical: https://toolspace.tech/px-to-rem/
Last updated: 2026-10-25

Convert pixels to rem and rem to pixels with any root font size. Convert one value, a list with one per line, or paste CSS and only its px values change.

This is an interactive tool that runs in the browser: [open the PX to REM converter](https://toolspace.tech/px-to-rem/) to use it. Nothing typed into it is uploaded.

## Worked example

A CSS rule at the default 16px root size. Only the px values change.

**css**

```
.card {
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 6px;
  line-height: 1.5;
}
```

**converted**

```
.card {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  line-height: 1.5;
}
```

## Common mistakes

### Using the wrong root size

rem is relative to the html element’s font size. If your CSS changes it, convert with that value, not 16.

### Mixing up rem and em

em compounds inside nested elements, so 1.5em inside 1.5em text is 2.25 times the parent size. Use rem when you want the same size everywhere.

### Converting media query breakpoints blindly

rem and em in media queries are based on the browser’s default font size, not your html font-size, so a 62.5% root doesn’t apply there.

### Rounding too hard

Two decimals can turn 13px into 0.81rem, which is 12.96px. Keep 4 decimals if you need sizes to match a design exactly.

## How it works

1. **Set the root font size:** Browsers default to 16px. If your CSS sets html { font-size } to something else, enter that instead.
2. **Type a value or paste a list:** Single converts one number as you type. Batch takes one value per line, or a whole stylesheet: px values are converted and everything else, including comments, strings and url(), is left as it is.
3. **Copy the result:** Pick how many decimals to keep, then copy or download. The table below shows common sizes at your root size.

## Questions

### How do I convert px to rem?

Divide the pixel value by the root font size. With the default 16px, 24px ÷ 16 = 1.5rem. To go back, multiply: 1.5rem × 16 = 24px.

### What is the difference between rem and em?

rem is relative to the root element’s font size, so 1rem is the same everywhere on the page. em is relative to the current element’s font size, so it compounds when elements are nested. This tool converts rem only and leaves em values alone.

### Why use rem instead of px?

When someone raises the default font size in their browser settings, text and spacing sized in rem grow with it. Sizes in px stay fixed.

### What if my site sets html { font-size: 62.5% }?

That makes the root 10px (62.5% of 16px), so 1rem is 10px. Enter 10 as the root font size.

### Should borders be in rem?

Often not. A 1px hairline becomes 0.0625rem, which can round to 0 or 2 device pixels at some zoom levels. Turn on “Keep 1px” to leave 1px values alone in CSS.

## Related

- [CSS beautifier](https://toolspace.tech/css-beautifier/)
- [Aspect ratio calculator](https://toolspace.tech/aspect-ratio-calculator/)
- [Color converter](https://toolspace.tech/color-converter/)
- [CSS gradient](https://toolspace.tech/css-gradient-generator/)