Border Radius Values in rem (2px to 16px)

Border Radius: px to rem

Border radius controls the roundness of element corners. Here are common values converted:

Conversion Table

px	rem	Tailwind class	Visual
0	0	rounded-none	Sharp corners
2	0.125	rounded-sm	Subtle rounding
4	0.25	rounded	Light rounding
6	0.375	rounded-md	Medium rounding
8	0.5	rounded-lg	Visible rounding
12	0.75	rounded-xl	Large rounding
16	1	rounded-2xl	Very round
9999	-	rounded-full	Pill / circle

Should Border Radius Use rem?

This is debatable. Arguments for each approach:

rem for border-radius:

• Corners scale proportionally with text size
• Cards and buttons maintain their visual proportion when zoomed
• Consistent with a fully rem-based design system

px for border-radius:

• Border radius is a visual decoration, not content
• Users generally do not expect corners to change when they zoom
• Very small radii (1–2px) can round to sub-pixel values in rem

Framework Approaches

• Tailwind CSS — Uses rem for all rounded-* utilities
• Bootstrap — Uses rem (0.375rem for default)
• Material UI — Uses px (4px default)
• Ant Design — Uses px (6px default)

The Pill Shape

For pill-shaped buttons and tags, use a very large value:

.pill {
  border-radius: 9999px; /* Always px — rem would be unnecessarily complex */
}

For pill shapes, px is universally preferred because the value just needs to exceed half the element's height.

Practical Recommendation

Use rem for border-radius values of 4px and above. For very small radii (1–2px), px is fine because the scaling difference is imperceptible. For pill shapes and circles, always use a large px value or 50%.