What is the Radius Generator?

The CSS border-radius property controls how rounded the corners of an element are. A value of 0 produces sharp square corners; 50% on a square element produces a circle. Between those extremes is a wide range of shapes — pill buttons, softly rounded cards, asymmetric forms — all controlled by up to eight values.

The Radius Generator lets you set each corner visually using sliders and see the result in real time, without manually writing and testing CSS values.

---

How to Use the Radius Generator

1. Adjust the corner sliders. Each corner — top-left, top-right, bottom-right, bottom-left — can be set independently. A uniform value applies the same radius to all corners.
2. Choose your unit. px for fixed pixel sizes, % for proportional rounding relative to the element's dimensions, em or rem for values relative to font size.
3. Watch the live preview. The preview box updates in real time as you drag the sliders.
4. Copy the CSS. Click to copy the generated border-radius value, ready to paste into your stylesheet or component.

---

CSS border-radius Syntax

The border-radius shorthand accepts one to four values, following the same clockwise pattern as padding and margin:

border-radius: 12px;                    /* all four corners */
border-radius: 12px 8px;               /* top-left/bottom-right, top-right/bottom-left */
border-radius: 12px 8px 4px;           /* top-left, top-right/bottom-left, bottom-right */
border-radius: 12px 8px 4px 0;        /* top-left, top-right, bottom-right, bottom-left */

For fully independent corner control, use the longhand properties:

border-top-left-radius: 12px;
border-top-right-radius: 8px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 0;

---

Elliptical Corners

Each corner can have two radii — horizontal and vertical — separated by a /:

border-radius: 50px / 20px;

This produces an elliptical shape rather than a circular arc on each corner. The Radius Generator handles this with separate horizontal and vertical controls when you need asymmetric corner curves.

---

Common Values and Their Uses

border-radius: 4px — subtle softening, common for input fields and small UI elements

border-radius: 8px — standard card and button rounding used across most design systems

border-radius: 12–16px — more prominent rounding, common in modern mobile-influenced UI

border-radius: 9999px — pill shape, regardless of element size. Used for tags, badges, and full-pill buttons

border-radius: 50% — perfect circle (on a square element) or oval (on a non-square element). Standard for avatar images

---

Privacy

All radius calculations and CSS generation happen in your browser. Nothing is sent to any server or stored anywhere.