CSS Border Radius Generator
Build any border-radius shape: all four corners equal, each corner independently, or full elliptical syntax (horizontal/vertical radii per corner). Live preview, copy as CSS.
How to use the CSS Border Radius Generator
Pick a mode: all four corners at once (most common), each corner separately, or full elliptical syntax. Drag the sliders; the preview reshapes live. Elliptical radii (e.g., 50px 25px) produce non-circular curves — useful for stylized shapes.
Border-radius beyond simple rounding
Most people use border-radius for evenly rounded corners, but the property is richer than that. Each corner can take its own value, and each corner accepts two radii — a horizontal and a vertical — which produces elliptical, asymmetric curves. That second form is how organic “blob” shapes and stylised cards are built, and the slash syntax that expresses it is easy to get wrong by hand.
Switch between all-corners, per-corner, and full elliptical modes and watch the shape reform live, then copy the exact value. To round a box that also has a shadow, pair this with the box-shadow generator; for shapes a radius can't make — polygons, arrows, stars — use the clip-path generator.
Common use cases
- Rounded cards — apply a consistent corner radius across components.
- Pills and badges — use a large radius for fully rounded ends.
- Avatars — make a perfect circle from a square image.
- Asymmetric shapes — round only some corners for tabs or speech bubbles.
- Organic curves — use elliptical radii for soft, non-circular blobs.