CSS design tool
CSS Border Radius Generator
Design rounded corners visually. Adjust linked corners, independent values, elliptical radii, units, preview styling, and copy the final CSS.
All settings, range checks that validate controls, and copy actions stay in your browser.
border-radius: 16px;Preview Customization
Examples
Start from pill, circle, blob, leaf, drop, ticket, and rounded-card presets.
Elliptical mode
Control horizontal and vertical corner radii separately for organic shapes.
Copy output
The generated border-radius declaration is ready to paste into CSS.
よくある質問
What does border-radius control?
It controls corner curvature. You can set one value for all corners or separate values for top-left, top-right, bottom-right, and bottom-left.
What is elliptical radius?
Elliptical syntax uses horizontal and vertical radii separated by a slash, such as 40px 20px / 20px 40px.
Can I reset or use examples?
Use the presets for rounded cards, pills, circles, blobs, leaves, drops, and ticket-like shapes.
Are preview settings uploaded?
No. Preview, controls that validate ranges, and copy actions run locally in your browser.