---
title: Border Radius
description: Cal.com's border radius system
---

import { BorderRadiusTable } from '@/components/ui/BorderRadiusTable';

# 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

```tsx
// 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.

<BorderRadiusTable />