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.