Something wrong with this tool?
About CSS Border Radius Generator Online
This tool helps you craft border-radius values with a visual preview. Use individual corner controls for asymmetric shapes, drag percentages for organic blob shapes, or pick from common presets (rounded, pill, circle).
Border-radius gives elements their rounded edges. Beyond simple uniform rounding, modern designs use elliptical radii, per-corner specifications, and even asymmetric percentages to create organic shapes used in illustration and decorative elements.
Output works in any CSS context — buttons, cards, images, containers. You can copy as shorthand (border-radius: ...) or longhand for each corner depending on your style preference.
How to use this tool
How to assemble a 4-corner border-radius value
Set each corner
"Top-left", "Top-right", "Bottom-right", "Bottom-left" each accept pixel values for that corner's radius. The order matches CSS shorthand: starting at top-left and going clockwise.
Press Run
Result is a single `css` field: `<tl>px <tr>px <br>px <bl>px`. Paste as the value of `border-radius:`. If all four values are equal you can shorten to a single number, but the tool always emits the full 4-value form.
Asymmetric tricks
Mismatched corners build common UI shapes: chat bubbles use a single zero corner (e.g. `12 12 12 0`); tabs use two zero bottom corners; pill buttons get a huge value on left+right and 0 on top+bottom — or simpler, set a very large equal value like `9999`.
Elliptical radii
CSS also supports per-corner elliptical radii with `tl-x/tl-y` syntax (`12px/24px`) for asymmetric ellipses. This tool only emits circular (single-value) corners — edit by hand if you need elliptical.