Radius
Choose from six corner sizes named after fruit. Use the same scale for controls and containers.
Scale
-
rounded-seed
0.25rem (4px)
Tags and compact controls
-
rounded-grape
0.5rem (8px)
Buttons and form controls
-
rounded-lychee
0.875rem (14px)
Cards and panels
-
rounded-mango
1.375rem (22px)
Hero tiles and media
-
rounded-pomelo
2.25rem (36px)
Marketing blocks and pull quotes
-
rounded-orb
9999px
Circular and pill shapes
Concentric nesting
Subtract the padding from the outer radius to get the inner radius. This keeps nested corners parallel.
Inner radius follows the outer curve
Inner radius is too large
Rules
Use the fruit radius classes. Tailwind defaults such as rounded-md and rounded-xl aren't part of Bruhs.
Use CSS variables to calculate nested corners, as shown above.
Use rounded-orb for circular shapes and pills.