Borders, Radius & Shadows
Enhance UI components with border styling, rounded corners, elevation shadows, and focus rings.
1. Border Radius (`rounded-*`)
rounded-none (0px)
rounded-sm (2px)
rounded-md (6px)
rounded-lg (8px)
rounded-xl (12px)
rounded-2xl (16px)
rounded-3xl (24px)
rounded-full
2. Box Shadows (`shadow-*`)
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
3. Focus Rings (`ring-*`)
Rings create accessible, beautiful focus outlines around buttons and text inputs:
Next Up
Learn background colors, background images, repeat, and vibrant linear gradients.
Next Lesson: Backgrounds & Gradients →
