Omnibus

Tip: switch to % and set opposite corners to 50% for pill and leaf shapes.

CSS
border-radius: 24px;

CSS border-radius generator

Round all four corners together or set each one independently, in pixels, percent or em. Percent-based radii on a rectangle give you pill and blob shapes; the preview shows exactly what the value produces.

The generator is fully client-side, so nothing leaves your browser — set your corners and copy the border-radius value.

Need another effect? See all CSS generators.

More CSS generators

CSS Gradient Generator

Linear, radial & conic gradients with unlimited stops.

CSS Box Shadow Generator

Layer offset, blur, spread, color & inset shadows.

Glassmorphism CSS Generator

Frosted-glass blur, transparency & border.

CSS Text Shadow Generator

Offset, blur, color — glow & layered text effects.

CSS Cubic Bezier Generator

Drag the curve to design custom easing.

CSS Border Radius Generator — frequently asked questions

How does percentage border-radius work?
A percentage is relative to the element's size — 50% on a square makes a circle, and mixing percentages per corner produces organic 'blob' shapes. Pixels give a fixed radius regardless of element size.
Is anything uploaded?
No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free. A single unobtrusive ad slot covers hosting.

Spotted a bug or have a suggestion?

Found something broken, have an idea, or just want to say thanks about any of our tools? Every message reaches a real person.