Border Radius Generator

Set CSS border-radius for each corner with live preview and presets

What is it and how does it work?

A border-radius generator lets you round the corners of an element visually — adjusting each corner with sliders and watching a live preview — then copy the exact CSS border-radius value. Rounded corners are one of the most common touches in modern interface design, softening cards, buttons, inputs and images, but the CSS that controls them can set each of the four corners independently and even make them elliptical, which is hard to picture from the numbers alone. Dragging a slider and seeing the shape change is far faster than editing values blind.

The detail most people do not realise is how much range border-radius has: beyond a uniform rounding, you can give each corner its own radius, and use two values per corner to create elliptical rather than circular curves — which is how you make organic, asymmetric "blob" shapes. A large enough equal radius on a square turns it into a perfect circle. This tool generates standards-based CSS in your browser with presets and per-corner control, ready to paste onto any element.

Common use cases

• Rounding a card or button: set a uniform radius and copy the CSS for soft, consistent corners.
• Making a circle or pill: apply a large radius to turn a square into a circle or a button into a pill shape.
• Creating an organic shape: give each corner a different elliptical radius to design a custom blob or asymmetric card.

Frequently asked questions

Can I round each corner differently?

Yes. border-radius accepts up to four values, one per corner (top-left, top-right, bottom-right, bottom-left), so you can round some corners and leave others square, or give each a different amount. The generator exposes per-corner control for exactly this.

How do I turn a square into a perfect circle?

Set the border-radius to 50% (or to half the element's width in pixels) on a square element. Because the radius reaches the centre of each side, the corners merge into a continuous circle. A pill shape comes from a large radius on a wider-than-tall element.

What do two values per corner do?

A single value makes a circular (quarter-circle) corner; two values give a corner separate horizontal and vertical radii, producing an elliptical curve. Combining different elliptical values on each corner is how soft, organic "blob" shapes are made.

Does a percentage radius behave differently from pixels?

Yes. A pixel radius is a fixed size, while a percentage is relative to the element's dimensions, so it scales as the element resizes. Percentages are how 50% reliably produces a circle on any square, regardless of its actual size.

CSS

Box Shadow Generator · Flexbox Generator · CSS Grid Generator · Text Shadow Generator · CSS Animation Generator · CSS Filter Generator