Tools Menu
Professional Tool
Border Radius Generator
Create advanced border-radius shapes and organic blobs using 8-point values.
#borderradius
#cssradius
#blobgenerator
#organicshapes
#cssshapes
border-radius: 50%;Corner Controls
50%
How to Use This Tool
Follow these simple steps to get the most out of the Border Radius Generator.
1
Drag corners to change individual radii.
2
Enable 'Blob Mode' for organic shapes.
3
Copy the `border-radius` CSS.
border-radius: 50%;Corner Controls
50%
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.
Related Arsenal
More specialized tools in the CSS & UI Tools category.