Standard Border Radius Classes
Applied equally to all four corners
rounded-none
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-full
Visual Comparison
No Radius
Content
Small Radius
Content
Medium Radius
Content
Large Radius
Content
Full Circle
Content
Applied to Different Elements
Div Element
Radius Size Progression
rounded-none:
rounded-sm:
rounded:
rounded-md:
rounded-lg:
rounded-xl:
rounded-2xl:
rounded-3xl:
rounded-full:
Important Notes
- Border-radius rounds the corners of an element's outer border edge
- Values can be specified in pixels, ems, rems, or percentages
rounded-fullcreates a perfect circle when applied to a square element- The effect is visible when the element has a visible border, background, or both
- Border-radius clips the content and children elements to the rounded shape
- You can specify different radii for each corner using more advanced properties