Border Radius Generator
Generate CSS border-radius values visually. From simple rounded corners to complex organic blob shapes.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);About
The border-radius property rounds the corners of an element. In its simplest form, a single value applies uniform rounding to all four corners. With four values (top-left, top-right, bottom-right, bottom-left), you can create asymmetric shapes. Advanced usage with 8 values (4 horizontal radii / 4 vertical radii) creates organic, blob-like shapes — this is how many modern design tools create abstract background shapes using pure CSS with no SVG or images.
FAQ
How do I make a perfect circle with border-radius?
Set border-radius: 50% on an element with equal width and height. The 50% value means the radius equals half the element size, creating a circle. For non-square elements, 50% creates an ellipse.
What is the 8-value border-radius syntax?
The syntax is: border-radius: TL TR BR BL / TL TR BR BL, where the values before the slash are horizontal radii and after are vertical radii. Different horizontal and vertical radii create elliptical corners instead of circular ones.