Free Developer Tool
CSS Border Radius Generator
Create custom CSS border-radius values for rounded corners and shapes.
Border Radius
What is CSS Border Radius Generator?
Create CSS border-radius declarations by adjusting the radius of individual corners. Preview rounded cards, buttons and custom shapes while generating ready-to-use CSS.
How to use
- Set the radius for each corner.
- Adjust the horizontal and vertical values if needed.
- Preview the resulting shape.
- Copy the generated CSS.
Features
- Individual corner controls
- Horizontal and vertical radii
- Live shape preview
- CSS generation
Common Use Cases
- Rounded cards
- Buttons
- Avatars
- Custom UI shapes
Example
Input
Top-left: 16px Top-right: 16px Bottom-right: 8px Bottom-left: 8px
Output
border-radius: 16px 16px 8px 8px;
FAQ
Can each corner have a different radius?
Yes.
Can I create fully rounded elements?
Yes.
Does it generate valid CSS?
Yes. The output uses standard CSS border-radius syntax.
Missing a feature?
If this tool doesn't cover your use case or is missing functionality, please let me know through the Contact page.
New improvements and features are added based on user feedback.