Border Radius Generator

Shape corners with more control

Border radius is one of the quickest ways to change the personality of an interface. Small values feel precise and structured, medium values make cards and buttons friendlier, and large values can create pills, blobs or playful illustration panels. This border radius generator exposes the full CSS syntax so you can design both ordinary rounded rectangles and elliptical corners without writing the slash notation by hand.

Each corner has a horizontal radius and a vertical radius. When the values are the same, the corner is circular and the CSS looks like the familiar four-value border-radius declaration. When X and Y differ, the corner becomes elliptical and CSS writes the horizontal values first, then a slash, then the vertical values. The live preview makes that relationship clear because the shape changes immediately as you move each control.

When elliptical radii are useful

Elliptical corners are helpful when you want something more organic than a simple card but still need CSS that is lightweight and responsive. They can make avatars, feature callouts, coupon shapes, image masks and decorative panels feel less generic. Asymmetric corners also help create a visual direction, drawing attention toward a headline or call to action. Use the blob preset as a starting point, then reduce the strongest values if the shape begins to distract from the content.

Using radius values consistently

For production design systems, keep a small set of standard radii for everyday components and use custom values only where the shape has a clear purpose. A button, input and card usually look more coherent when they share related corner sizes. Decorative sections can be more expressive, but they should still respond well at different widths. After copying the generated CSS, test it on the real element size because a radius that looks balanced on the preview card may feel too strong on a compact badge or too subtle on a wide hero panel.