Border Radius Generator

Features

• Independent control of all four corners
• Elliptical mode for organic blob shapes
• Link corners together for uniform rounding
• Live preview at adjustable size
• Copies the shortest valid shorthand

How to use it

1. Drag the sliders for each corner.
2. Turn on elliptical mode for asymmetric curves.
3. Press Random blob for an organic shape.
4. Copy the CSS when you are happy.

Border radius syntax and the squircle problem

The shorthand accepts one to four values, applied clockwise from the top left: one value rounds every corner, two set top-left/bottom-right and top-right/bottom-left, and four set each corner individually. The slash syntax is the less-known part, border-radius: 50% 20% / 30% 40% gives horizontal radii before the slash and vertical radii after, which is what produces elliptical rather than circular corners and makes organic blob shapes possible.

Percentages behave differently from pixels in a way that catches people out. A percentage is relative to the element's own dimensions, so border-radius: 50% turns a square into a circle and a rectangle into an ellipse. Pixel values stay fixed regardless of size, which is usually what you want for cards and buttons where the corner should look consistent across different content lengths.

One thing CSS cannot currently do well is the squircle. Apple's icon shape is a superellipse with continuous curvature, where the transition from straight edge to curve is smooth rather than abrupt. A CSS border-radius is a plain quarter-ellipse, and at large radii the discontinuity is visible as a slight flattening where the curve meets the edge. Approximating a true squircle today needs an SVG path or a clip-path; the proposed corner-shape property would fix this but is not yet widely available.