Border Radius
Cal.com's border radius system
Border Radius
Our design system uses a consistent set of border radius values to create a cohesive and modern interface. The border radius scale ranges from none (sharp corners) to full (completely rounded).
Usage
// No border radius
<div className="rounded-none">Sharp corners</div>
// Default radius
<div className="rounded">Default rounded corners</div>
// Larger radius
<div className="rounded-lg">Larger rounded corners</div>
// Fully rounded (useful for pills, badges)
<div className="rounded-full">Completely rounded</div>Border Radius Scale
Click on any radius to copy its Tailwind class name. Each preview shows how the radius appears when applied.
None
rounded-none
0px
Small
rounded-sm
0.125rem
Default
rounded
0.25rem
Medium
rounded-md
0.375rem
Large
rounded-lg
0.5rem
XLarge
rounded-xl
0.75rem
2XLarge
rounded-2xl
1rem
3XLarge
rounded-3xl
1.5rem
Full
rounded-full
9999px