Radius

One base radius, and the multiplicative base-luma scale computed from it.

Summary

Every corner in a pmndrs project derives from one value, --radius. The rounded-* utilities are multiples of it, so changing that one value rescales every corner at once.

Base

 
:root {
  --radius: 0.625rem; /* 10px at a 16px root */
}

It comes from the poimandres shadcn preset (b1VlIttI, style base-luma, radius default), applied by npx shadcn@latest init --preset b1VlIttI.

Scale

The preset's base-luma style derives the scale by multiplication: each step is --radius times a factor. Values below are at a 16px root.

TokenUtilityValuerempx
--radius-xsrounded-xsinherited from Tailwind v40.125rem2px
--radius-smrounded-smcalc(var(--radius) * 0.6)0.375rem6px
--radius-mdrounded-mdcalc(var(--radius) * 0.8)0.5rem8px
--radius-lgrounded-lgvar(--radius)0.625rem10px
--radius-xlrounded-xlcalc(var(--radius) * 1.4)0.875rem14px
--radius-2xlrounded-2xlcalc(var(--radius) * 1.8)1.125rem18px
--radius-3xlrounded-3xlcalc(var(--radius) * 2.2)1.375rem22px
--radius-4xlrounded-4xlcalc(var(--radius) * 2.6)1.625rem26px

The table is the source of truth: the previews below render this site's own radius scale, which can differ slightly from what your project gets.

Preview
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-4xl

Edit this page