/ developer tools
CSS Border Radius Generator
Live
Border Radius (all corners)16px
Width200px
Height130px
border-radius: 16px;
Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.
Generate CSS border-radius declarations with precision. Switch between Simple mode (all corners equal) and Per Corner mode (individual TL/TR/BR/BL). Toggle between px and % units. 12 shape presets: None, Soft, Rounded, Large, Pill, Circle, Squircle, Leaf TL, Leaf TR, Cut BR, Tab, Diamond. Adjust the preview shape's width, height, and fill color. Live CSS output.
How to Use
- 1Choose between Simple (all corners) or Per Corner mode using the toggle
- 2Set the unit to px or % depending on your layout needs
- 3Drag the radius slider(s) to round the corners
- 4Click any preset (Pill, Circle, Leaf, etc.) for instant shapes
- 5Adjust width and height to preview different aspect ratios
- 6Click 'Copy CSS' to copy the border-radius rule
Features
- Simple mode (all corners equal) and Per Corner mode (TL/TR/BR/BL independently)
- px and % unit toggle - percentage values are size-relative
- 12 shape presets: None, Soft, Rounded, Large, Pill, Circle, Squircle, Leaf TL, Leaf TR, Cut BR, Tab, Diamond
- Adjustable preview shape width and height
- Fill color picker for the preview element
- Live CSS border-radius output with one-click copy
- 100% browser-based
Frequently Asked Questions
Guest PlanUpgrade
Community Feedback
Like
00
Total Rating
No ratings yetReviews
No reviews yet. Be the first!
Rate & Review
Was this tool helpful?
Rate this tool:
Write a Review
0/500