CSS Border Radius Generator

How to use

1. 1Pick a preset shape (card, pill, circle, leaf, blob, ticket, etc.) for a quick start, or skip presets and edit each corner directly.
2. 2Choose your unit (px, %, em, or rem). Percentages are relative to the element's width and height, which is how true ellipses and pills are made.
3. 3Use Link all corners for symmetric rounding, or turn it off to set every corner independently.
4. 4Toggle Elliptical to expose separate horizontal and vertical radii per corner. This emits the slash-separated border-radius syntax.
5. 5Tune the preview width, height, and colors to verify how the corners read at the target aspect ratio.
6. 6Copy the shorthand, the per-corner longhand, or the Tailwind class and paste it into your stylesheet or component.

About this tool

CSS Border Radius Generator gives you independent control over every corner of a CSS shape. Each corner has its own horizontal and vertical radius, so you can generate the full elliptical border-radius syntax (the eight-value form with a slash) as well as the simpler four-value and one-value shorthands. Adjust corners with sliders or numeric inputs, switch units between px, percent, em, and rem, and toggle Link all corners on for symmetric rounding or off for full per-corner control. The Elliptical mode exposes separate horizontal and vertical radii per corner, matching the W3C border-radius specification, which is how shapes like blobs, leaves, and squircles are built. A live preview canvas renders the exact value the tool will copy and lets you change the preview width, height, fill color, and label color, so you can verify how the corners read at different aspect ratios before shipping. Built-in presets (card, pill, circle, leaf, ticket, blob, tab, speech, petal, squircle) provide quick starting points for common shapes, and a single click resets everything. Output is provided three ways: the optimized border-radius shorthand, the four per-corner longhand properties (border-top-left-radius and friends) for codebases that prefer them, and a Tailwind v3+ arbitrary-value class. All generation happens in your browser, so values never leave your device, and the same generated string is what powers the live preview.

Free to use. Works in your browser. No signup, no login.