Tools menu
Free tool
Border Radius Generator
Create advanced border-radius shapes and organic blobs using 8-point values.
border-radius: 50%;Corner Controls
How to use this tool
Follow these steps to get the most out of the Border Radius Generator.
Drag corners to change individual radii.
Enable 'Blob Mode' for organic shapes.
Copy the `border-radius` CSS.
The guide
Beyond Simple Circles
CSS border-radius is more powerful than just rounding corners. By specifying different values for horizontal and vertical radii on each corner (using the / separator), you can create complex, organic shapes known as Blobs.
Syntax Deconstructed
/* Simple */
border-radius: 10px;
/* Complex */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;The complex values represent: top-left, top-right, bottom-right, bottom-left (horizontal) / top-left, top-right, bottom-right, bottom-left (vertical).
Use Cases
- Avatars: Soft, organic profile picture frames.
- Backgrounds: Abstract, floating shapes behind your content.
- Buttons: Fully pill-shaped or slightly softened interactive elements.
Want it done for you?
Need a fast, well-built website rather than a tool? We design and develop sites on Astro, Next.js, WordPress and Shopify.
Website Design & DevelopmentMore in CSS & UI Tools