Question 1

What border-radius classes does Tailwind provide?

Accepted Answer

Tailwind offers: rounded-none (0), rounded-sm (0.125rem), rounded (0.25rem), rounded-md (0.375rem), rounded-lg (0.5rem), rounded-xl (0.75rem), rounded-2xl (1rem), rounded-3xl (1.5rem), and rounded-full (9999px).

Question 2

How do I round specific corners?

Accepted Answer

Use directional classes like rounded-t-lg (top corners), rounded-b-lg (bottom), rounded-l-lg (left), rounded-r-lg (right), or individual corners like rounded-tl-lg (top-left).

Question 3

When should I use rounded-full?

Accepted Answer

rounded-full (9999px) creates fully circular corners, perfect for circular avatars, pill-shaped buttons, and circular icon containers. It works best on square or near-square elements.

Question 4

Can I use custom border-radius values?

Accepted Answer

Yes! Use arbitrary values like rounded-[20px] or rounded-[50%]. You can also extend the theme in tailwind.config.js to add custom named values like rounded-xl2.

Border Radius Visualizer

You might also like

Box Model Visualizer

Shadow Generator