Radius
A corner radius scale from square to fully round.
rounded-0 --radius-0
rounded-none
0px rounded-1 --radius-1
4px rounded-2 --radius-2
5px rounded-3 --radius-3
6px rounded-4 --radius-4
8px rounded-5 --radius-5
10px rounded-6 --radius-6
12px rounded-7 --radius-7
16px rounded-8 --radius-8
20px rounded-9 --radius-9
100px rounded-full --radius-full
9999pxUsage
Write the step number after rounded-, as in rounded-4. Tailwind's named sizes, such as rounded-lg, and the bare rounded class are not available.
Larger elements get larger corners. In frappe-ui components:
| Class | Used on |
|---|---|
rounded-4 (8px) | Buttons, inputs and menu items |
rounded-6 (12px) | Menus |
rounded-7 (16px) | Dialogs |
rounded-full | Badges and round avatars |
Each step is also a CSS variable, as in var(--radius-4).