✨CSS Border Radius Generator
The `border-radius` property can do much more than just round corners. By controlling the radius of each corner independently, you can create interesting and organic 'blob'-like shapes. Our generator gives you individual sliders for all four corners, plus a master slider to control them all at once. See your shape update in a live preview and get the simple CSS code to replicate it. It's a fun tool for creating unique avatars, cards, and other non-standard UI elements.
Frequently Asked Questions
Can I have different horizontal and vertical radii?
Yes, the full `border-radius` syntax allows for that (e.g., `10px / 20px`). This generator uses the shorthand version with a single value per corner for simplicity, which is sufficient for creating a wide variety of organic shapes.
What units are being used?
This generator uses percentage values for the radii, which makes the shape scale nicely with the element's size. The generated CSS can be easily changed to use pixels or other units if needed.
