Should border-radius use rem or px?

rem keeps corners proportional as the interface scales with the root font-size. Use a large px value only for pill shapes.

How do I keep nested corners concentric?

Make the inner radius smaller than the outer one by roughly the padding amount so the curves stay parallel.

Is border radius generator free to use?

Yes. UnitCraft calculators are free and run entirely in your browser.

Does UnitCraft send my input values to a server?

No. Calculator inputs are processed locally in the browser tab.

Can I copy the generated CSS output?

Yes. Each tool provides copy-ready snippets so you can paste values directly into code.

Utility · CSS unit tool

Border radius generator

Rounded corners follow the same px ÷ root rule as typography when your system is rem-centric. Generating `border-radius` in rem keeps corner softness proportional as the interface scales.

Pixels to convert

Enter the pixel value first.

Calculation base

Root font size

Usually html { font-size }

Result

1.5000 rem

24px ÷ 16px = 1.5000rem

CSS snippet

css

border-radius: 1.5000rem;

Keyboard tip: press Tab or Shift+Tab to switch fields.

Why radius in rem

If type and spacing scale with the root font-size but radii are fixed in px, components look subtly off at large zoom levels. Expressing radius in rem keeps the whole shape language consistent.

A small rem-based radius scale (e.g. 0.25rem, 0.5rem, 0.75rem, 1rem, plus a `9999px` pill) covers most UI needs.

Practical tips

For pill shapes, a very large fixed value like `9999px` is fine—it caps at a half-height capsule regardless of size.

Nest radii thoughtfully: an inner element's radius should usually be smaller than its padded container's so the curves stay concentric.

Copy-ready examples

Radius tokens

css

:root {
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.5rem;  /* 8px */
}
.card { border-radius: var(--radius-md); }

Frequently asked questions

Should border-radius use rem or px?: rem keeps corners proportional as the interface scales with the root font-size. Use a large px value only for pill shapes.
How do I keep nested corners concentric?: Make the inner radius smaller than the outer one by roughly the padding amount so the curves stay parallel.
Is border radius generator free to use?: Yes. UnitCraft calculators are free and run entirely in your browser.
Does UnitCraft send my input values to a server?: No. Calculator inputs are processed locally in the browser tab.
Can I copy the generated CSS output?: Yes. Each tool provides copy-ready snippets so you can paste values directly into code.