Shape
Corner radius is driven by a single base token(--radius = 0.75rem); the scale is computed from it, so retuning one value reshapes the whole system consistently. Pick by element size — smaller things get a smaller radius so curves stay visually concentric.
Radius scale
rounded-sm
radius − 4px ≈ 8px
Small inner elements (badges, chips, nested inputs).
rounded-md
radius − 2px ≈ 10px
Default — buttons, inputs, most controls.
rounded-lg
radius = 12px
Cards, popovers, larger containers.
rounded-xl
radius + 4px ≈ 16px
Large panels / hero surfaces.
Border widths
border
1px — the default everywhere.
border-2
2px — emphasis / selected state.