# Corner Radius — Full Reference

> Base multiple of 8.

---

## Tokens

| Token | Value | Element height | Usage |
|-------|-------|----------------|-------|
| S     | 4px   | 1–39px height  | Small elements. Exception: badges/chips |
| M     | 8px   | 40–71px height | Medium elements |
| L     | 16px  | 72px+ height   | Large elements |

---

## Application Rules

- Choose the token based on the element's **height**, not visual preference
- Badges and chips are an **exception** to token S — they can use `border-radius: 999px` (pill)
- The scale is a multiple of 8 (except S which is 4px as the minimum useful value)

```css
/* Token S — elements up to 39px tall */
border-radius: 4px;

/* Token M — elements 40px to 71px tall */
border-radius: 8px;

/* Token L — elements 72px or taller */
border-radius: 16px;
```
