CSS Border Radius Generator
Create rounded and organic shapes with live preview.
What does CSS Border Radius Generator do?
Control each corner radius independently, including the elliptical two-value syntax that produces organic blob shapes. The preview updates live and the CSS is always ready to copy.
How to Use CSS Border Radius Generator
- 1Drag the corner slidersLink them for uniform rounding.
- 2Switch to percentageFor shapes that scale with the element.
- 3Try the elliptical modeFor organic, asymmetric shapes.
- 4Copy the CSSShorthand, ready to paste.
Key Features
- Each corner controlled independently, or all four linked
- Elliptical two-value syntax for organic blob shapes
- Pixel and percentage units
- Live preview with adjustable element size
- Presets for pills, circles, cards and blobs
- Copy-ready CSS in shorthand form
Frequently Asked Questions
How does the border-radius shorthand work?
Values run clockwise from the top left: top-left, top-right, bottom-right, bottom-left. Given fewer values, opposite corners share — two values set the two diagonal pairs.
What does the slash syntax mean?
It separates horizontal and vertical radii. "border-radius: 50% / 30%" makes each corner an ellipse rather than a circular arc, which is how organic blob shapes are made.
How do I make a perfect circle?
Set border-radius to 50% on an element with equal width and height. If the element is not square you get an ellipse instead.
How do I make a pill-shaped button?
Use a large fixed radius such as 9999px. It clamps to half the height, so the ends stay perfectly semicircular whatever the button’s size.
Everything is generated in your browser. Nothing is sent to a server, so results are private and the tool keeps working offline.
Related Tools
CSS Box Shadow Generator
Design box shadows visually and copy the CSS.
CSS Gradient Generator
Build linear, radial and conic gradients with live preview.
CSS Text Shadow Generator
Design text shadows, outlines and glow effects.
CSS Formatter
Beautify CSS with consistent indentation and spacing.