How to Use the CSS Border Radius & Squircle Generator
-
1
Use the 8 individual corner sliders or input fields to set precise pixel or percentage values.
-
2
Preview updates live.
-
3
Copy the shorthand or expanded CSS border-radius property.
Practical Example & Use Case
Common Real-World Scenario
Creating asymmetric card corner radii matching Apple-style squircle app icons for a mobile app landing page.
Technical Notes & Limitations
Browser Engine Architecture
Supports up to 8-value border-radius shorthand (top-left-x top-left-y top-right-x ...) for maximum precision.
Frequently Asked Questions
What is a squircle?
A squircle is a shape between a square and circle with smoothly curved corners, famously used in iOS app icons and modern UI cards.
Can I generate percentage-based radii for responsive layouts?
Yes. Toggle the unit selector between px and % for each corner independently.