Handytool
DeveloperFreeRuns locally

CSS border-radius generator

Visually design CSS border-radius — uniform, per-corner, and elliptical — with live preview.

Preview
CSS
border-radius: 16px;
Mode
Unit

Per-corner mode controls each corner individually; elliptical splits horizontal and vertical radii.

About the CSS border-radius generator

Handytool's border-radius generator lets you shape the corners of an element with sliders instead of guesswork. Use uniform mode for a simple rounded box, per-corner mode to build asymmetric pill shapes, or elliptical mode to split horizontal and vertical radii for organic blob shapes. The preview updates live and the CSS declaration is one click away.

CSS border-radius generator features

  • 01

    Uniform and per-corner modes

    Uniform mode applies one radius to every corner. Per-corner mode controls top-left, top-right, bottom-right, and bottom-left independently — pill, leaf, and asymmetric tag shapes are a few clicks away.

  • 02

    Elliptical (X/Y) corners

    Toggle elliptical mode to specify a horizontal and a vertical radius per corner — the syntax CSS supports for organic, blob-like shapes.

  • 03

    Three units

    Switch between px, %, and rem. Percentage values create true ellipses that scale with the box; rem values track the root font size for accessibility.

CSS border-radius generator FAQ

What's the difference between px and %?
Pixel radii are absolute — a 16px corner is always 16px. Percentage radii are relative to the element's width and height, 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 example a horizontal pill (50%/100%) or a leaf-like blob shape. CSS expresses this as `top-left-x top-right-x ... / top-left-y top-right-y ...`.
Why does my percent radius look wrong on a non-square box?
Percentages on border-radius are relative to the corresponding side: horizontal percentages to width, vertical to height. On a wide, short box that means the corners stretch into ellipses, not perfect arcs.
Does the output work in every browser?
Yes — border-radius and elliptical syntax are supported in every modern browser including all evergreen versions of Safari, Firefox, Edge and Chrome.

Related tools

Developer →

Explore other tools

All tools →