Key takeaways
- 01Three modes — uniform, per-corner, and elliptical — cover everything from simple rounded buttons to organic blob shapes.
- 02Supports px, %, and rem units, each with different scaling behavior.
- 03Elliptical mode exposes horizontal and vertical radii per corner for CSS's full border-radius syntax.
- 04Live preview uses the real CSS property, so what you see is exactly what your browser will render.
From Simple Rounded Corners to Organic Blob Shapes
A four-corner border-radius value is easy enough to type from memory — border-radius: 8px. But once you need different radii per corner, or you want the CSS elliptical syntax for organic shapes, the shorthand becomes cryptic fast. The full form is top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — eight values in a specific order.
Handytool's border-radius generator lets you drag sliders for each corner in any mode and see the shape update live. Switch between px, %, and rem without recalculating, and copy the correct shorthand or long-form CSS declaration when you're done.
How to Design a Border Radius
- 01
Choose a mode
Uniform mode applies one radius to all four corners. Per-corner mode controls each corner independently. Elliptical mode adds a separate horizontal and vertical radius per corner.
- 02
Pick a unit
Choose px for absolute sizes, % for values that scale with the element's dimensions, or rem for sizes tied to the root font size.
- 03
Drag the sliders
Adjust the radius values and watch the preview element update live. For per-corner mode, drag each corner's slider independently.
- 04
Preview the shape
The preview box applies the actual CSS border-radius property, so the shape you see is the shape your browser will render.
- 05
Copy the CSS
Click Copy to grab the border-radius declaration and paste it into your stylesheet.
Common Shapes and When to Use Each Mode
- 01Pill button: uniform % mode, set to 50% — always a full pill regardless of button width
- 02Card with subtle rounding: uniform px mode, 8–16px — the most common UI pattern
- 03Asymmetric tag or label: per-corner mode, sharp on one side, rounded on the other
- 04Avatar circle: uniform % mode, 50% — scales with the image container
- 05Organic blob shape: elliptical mode with different X/Y values per corner
Instant Preview, Nothing Uploaded
The border-radius generator is entirely client-side. Sliders, mode switches, and unit changes all update the preview immediately with no server roundtrip. There's no account and no rate limit.
The tool works across all modern browsers. The border-radius property — including elliptical X/Y syntax — is supported in every evergreen version of Safari, Firefox, Edge, and Chrome, so the output is safe to use without vendor prefixes or fallbacks.
Border-Radius Generator FAQ
What is the difference between px and % for border-radius?
Pixel radii are absolute — 16px is always 16px. Percentage radii are relative to the element's dimensions, so 50% creates a perfect circle on a square box and an ellipse on a rectangle.
When should I use elliptical mode?
Use elliptical mode when you want a corner that bulges more on one axis — for a horizontal pill, a leaf shape, or an organic blob. CSS expresses this as X-radii / Y-radii in the border-radius shorthand.
Why does my percentage radius look wrong on a non-square box?
Horizontal percentages are relative to the element's width; vertical percentages to its height. On a wide, short element the corners stretch into ellipses rather than circular arcs.
Does the output work in every browser?
Yes — border-radius including elliptical syntax is supported in every modern browser: all evergreen versions of Safari, Firefox, Edge, and Chrome. No vendor prefixes needed.
How do I create a perfect circle with border-radius?
Set all corners to 50% in percentage mode on a square element. The element also needs equal width and height — use aspect-ratio: 1 / 1 if the size is dynamic.