Web Developer
CSS Border Radius Generator
Design standard rounded corners or experimental 8-point organic shapes and blobs with real-time visual feedback.
100% In-Browser Client-Side — Zero Server Uploads
Presets:
Radius Sliders
Top Left60%
Top Right40%
Bottom Right30%
Bottom Left70%
Vertical Axis Radii (%)
TL Vertical: 60%
TR Vertical: 30%
BR Vertical: 70%
BL Vertical: 40%
Border Radius Preview
CSS Output
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
Beyond Standard Rounded Corners
Standard 8px or 16px border-radius is great for buttons and cards, but asymmetric 8-point curves give hero images, avatars, and decorative background blobs an organic, handcrafted feel.
Frequently Asked Questions
Helpful answers to common image compression questions.
CSS border-radius allows specifying 8 values separated by a slash (e.g. '60% 40% 30% 70% / 60% 30% 70% 40%'), which defines the horizontal and vertical radii independently to create organic shapes and blobs.