Border Radius Generator
Round corners individually and copy the border-radius CSS.
Corner rounding quietly sets a brand's tone, from crisp and corporate to soft and approachable. Round all four corners together for a uniform look, or shape each one independently, then copy the resulting border-radius value.
Using the generator
- Link the corners for a single consistent radius, or unlink them to craft custom shapes.
- Work in px, %, em or rem to match the conventions of your design system.
- Reach for the presets when you just need a pill button or a perfect circle.
