How do I make a circle?

Use border-radius: 50% on an element with equal width and height. On a rectangle, 50% gives an ellipse, while a large pixel value gives a pill with straight sides.

What does the slash in border-radius mean?

It separates horizontal radii from vertical radii, so each corner can be a quarter ellipse instead of a quarter circle. Organic blob shapes use this form.

Border Radius Generator

Round each corner, switch to elliptical radii and drag edge handles to sculpt blob shapes. Copy border-radius CSS or Tailwind.

Live preview

Switch to % to sculpt the shape with edge handles.

border-radius: 24px;

Everything stays in your browser.

Format references

MDN — border-radius

Tool page updated: 2026-10-25

Live preview

Guide and example

Related tools

Format references