CSS Border Radius Generator
Control each corner's radius independently and copy the resulting CSS. Setting all four the same gives standard rounded corners; varying them produces asymmetric and organic shapes.
Free, no signupRuns entirely in your browser
Input
Result
border-radius: 15px 15px 15px 15px;
About
What the CSS Border Radius Generator does
Rounding should be proportionate. A large radius on a small element consumes the whole shape, while a small radius on a big card is barely visible — many design systems scale radius with component size for this reason. A radius of 50% on a square element produces a perfect circle.
How it works
Using the CSS Border Radius Generator
- 1Set the radius for each corner, or apply one value to all four.
- 2Values in pixels give a fixed rounding regardless of size.
- 3Percentage values scale with the element's dimensions.
- 4A live preview shows the shape.
- 5Copy the CSS declaration.
Use cases
What people use it for
- Setting a consistent corner radius across a design system
- Making a circular avatar from a square image
- Creating a speech-bubble or tab shape with one square corner
- Producing organic blob shapes for decoration
FAQ
Frequently asked questions
6 related
All tools →