CSS border-radius Generator
Shape corners visually with individual control over all four radii, from uniform rounding to asymmetric blobs. The generator outputs the exact shorthand or longhand CSS you need.
Using the Border Radius Generator: step by step
- Drag the controls for each of the four corners.
- Use the uniform lock for a standard rounded rectangle.
- Watch the preview shape morph in real time.
- Copy the border-radius CSS into your stylesheet.
What people use the Border Radius Generator for
- Creating pill buttons, rounded cards, and modern UI containers.
- Designing organic blob shapes for illustrations and avatars.
- Matching a design mockup's exact corner curve in code.
- Understanding how horizontal and vertical radii differ in the shorthand.
Inside the Border Radius Generator
border-radius accepts one value per corner, and each corner can take a second value after a slash that defines an elliptical rather than circular curve, which is how dramatic leaf and blob shapes are made. The generator maps your adjustments to the correct shorthand form and expands to longhand when each corner differs. Preview rendering is instant CSS, computed locally.
Limitations worth knowing
Rounding is clipped by the element's box; adjacent corners that overlap get scaled down by the browser, which can slightly alter extreme shapes.
Border Radius Generator FAQ
How do I make a perfect pill shape?
Set the radius to half the element's height or a very large value like 999px for fully rounded ends.
What does the slash syntax mean?
Values after the slash define the vertical radius, enabling elliptical corners.
Can each corner be different?
Yes, all four corners are controlled independently, and the code reflects that.
Last reviewed: October 2026.