Design System
Border Radius
Border radius tokens and visual reference.
Radius Variants
Each box demonstrates a different border-radius value.
rounded-none
rounded-xs
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-full
Base Radius Variable
Nuxt UI derives all component radii from a single CSS variable.
Nuxt UI uses --ui-radius as the base value. Buttons, inputs, cards, and other components derive their border radius from this variable, ensuring consistency across the entire interface.