CSS border-radius generator
Per-corner border-radius with live preview and a shorthand value.
Runs 100% in your browserHow to use the border-radius generator
- Adjust per-corner radii. Use the four sliders for each corner, or the elliptical X/Y pair for the slash syntax.
- Copy the CSS. Click Copy to grab the rule. The shorthand collapses to a 1-, 2-, 3- or 4-value form when possible.
The four-corner shorthand
border-radius rounds the corners of an otherwise rectangular box — unlike
clip-path, the element keeps its full box and clickable
area, the corners just curve. The shorthand reads clockwise from the top-left:
top-left, top-right, bottom-right, bottom-left. CSS collapses it when corners repeat —
12px when all four match, 12px 4px for the two diagonal pairs, three
values when only one differs. Per-corner control (a tab rounded on top only, a speech bubble with
one square corner) is just a matter of giving each corner its own value.
Elliptical corners with the slash
The underused half of the property is the slash syntax:
border-radius: 40px 10px / 20px 30px sets the horizontal radii
before the slash and the vertical radii after it. That makes each corner an
ellipse rather than a quarter-circle, which is how organic "blob" shapes and asymmetric leaf
cards are built. Give a corner a single radius and the two axes are equal, producing a circular
arc; splitting them is what unlocks the soft, irregular curves a plain pixel value can't reach.
Percentages, pills and the squircle limit
Percentage radii scale with the element — 50% on a square yields a perfect circle,
on a rectangle an ellipse — while pixel radii stay fixed as the box grows. For pill buttons the
cheap trick is an over-large radius such as 9999px, which always clamps to a
half-height ellipse no matter the element's size. The one thing border-radius can't do
is a true "squircle" — the continuous-curvature corner Apple uses — because CSS corners are
circular or elliptical arcs; for that superellipse look you need an SVG or a clip-path.
Frequently asked questions
- border-radius rounds the corners of a box. The shorthand accepts 1–4 length values; the long form sets each corner (and even the X/Y elliptical radii) independently.
- border-radius: 20px / 40px means a 20-pixel horizontal radius and a 40-pixel vertical radius — i.e. an ellipse rather than a circle at each corner.
- Percent radii scale with the element's size — 50% on a square box gives a circle. Pixel radii stay fixed regardless of element size.
- Yes — drop the value into a Tailwind arbitrary class like rounded-[20px_40px_20px_40px].