Border Radius Visualizer

Corners, one radius at a time

border-radius accepts one to four values that map to the corners clockwise from top-left: top-left, top-right, bottom-right, bottom-left. Give it one value and all four corners match; give it two and the first applies to the top-left/bottom-right diagonal. Each corner can also take two radii, a horizontal and a vertical one, which produces an ellipse rather than a circle at that corner.

The slash syntax for elliptical corners

The full form separates horizontal radii from vertical radii with a slash: border-radius: 20px / 40px makes every corner an ellipse that is 20px wide and 40px tall. This is how you create soft, organic shapes instead of uniform rounding, and it is easy to miss because the one-value form hides it.

Example

/* a speech-bubble-ish asymmetric card */
.bubble {
  border-radius: 16px 16px 16px 4px;
}

/* a true pill, whatever the height */
.pill {
  border-radius: 9999px;
}

A very large value like 9999px always produces a full pill or circle, because each corner can only round up to half the shorter side; the browser caps it for you.

Pitfalls

Percentage radii are relative to the element's own width and height, so 50% turns a square into a circle but a rectangle into an ellipse. Rounded corners on a parent do not clip children unless you add overflow: hidden, which is the usual reason an image pokes past a card's rounded edge. Pair this with the gradient generator when you want a rounded card with a soft background.

FAQ

Why do my corners look uneven? If the element has a border, the inner and outer radii differ. The browser shrinks the inner curve to keep the border width constant, which can look thin at the corners.

Can I animate border-radius? Yes, it is animatable, so morphing a square into a circle on hover works. Keep the start and end value forms consistent so the interpolation stays smooth.

What is the squircle look? True superellipse corners are not native CSS yet; approximate them with a large elliptical radius or an SVG mask.