CSS Border Radius Generator
Create any border radius shape visually — circles, pills, blobs, asymmetric shapes with live CSS output.
Quick Shapes
About CSS Border Radius
The border-radius CSS property rounds the corners of an element. It accepts 1-4 values (shorthand for individual corners), and each corner can even have two radii for elliptical rounding using the slash notation: border-radius: 30px 70px 70px 30px / 30px 30px 70px 70px creates organic blob shapes. The individual corner properties (border-top-left-radius etc.) offer maximum control.
FAQ
How do I make a perfect circle with CSS?
Set border-radius: 50% on an element with equal width and height. The 50% makes each corner radius equal to half the element dimensions, creating a circle. For non-square elements, 50% creates an ellipse. You can also use border-radius: 9999px (a very large value) to create a pill shape regardless of element width.