About CSS Border Radius
The border-radius CSS property rounds the corners of an element. It accepts one to four length or percentage values, applied clockwise starting from the top-left corner: top-left, top-right, bottom-right, bottom-left. A single value rounds all four corners equally. Combined with the slash syntax, each corner can also be an ellipse — a different radius horizontally and vertically — which is how designers create organic shapes and squircle-style elements.
This generator lets you drag the corner handles directly on the preview to set radii visually, switch between three modes, and copy the resulting CSS with a single click.
How the shorthand works
| Values | Applied to |
|---|---|
| 1 value | All four corners equally |
| 2 values | TL & BR / TR & BL |
| 3 values | TL / TR & BL / BR |
| 4 values | TL / TR / BR / BL (clockwise) |
The slash syntax (elliptical corners)
A forward slash separates horizontal and vertical radii. The four values before the slash set the horizontal radius of each corner; the four after set the vertical radius:
| CSS | Result |
|---|---|
| border-radius: 20px / 40px | Every corner is an ellipse 20px wide by 40px tall |
| border-radius: 20px 30px / 40px 50px | TL & BR = 20×40, TR & BL = 30×50 |
| border-radius: 50% / 30% | Elliptical curve, wider than it is tall |
Pixels vs percentages
- Pixels give a fixed, size-independent rounding — predictable across different element sizes.
- Percentages scale with the element.
50%on a square makes a perfect circle; on a rectangle it makes an ellipse. - Very large values (like
9999px) get capped at half the smaller dimension, producing a perfect pill shape regardless of width.
Common corner values
| Value | Feel | Typical use |
|---|---|---|
| 0 | Sharp | Brutalist, editorial, datatable cells |
| 4–8px | Subtle | Input fields, tags, small buttons |
| 12–16px | Modern | Buttons, cards, panels |
| 20–30px | Soft | Large cards, modals, hero panels |
| 50% | Circular | Avatars, icon buttons, badges |
| 9999px | Pill | Primary CTA buttons, filter chips |
Tips
- Match nested radii. If you have a card with 16px radius and a button inside with 8px, the visible gap at the button's corner will look uneven. Use
outer − inner paddingfor the inner radius. - Combine with overflow: hidden. Child content (images, videos) will still square-crop at the corners unless you set
overflow: hiddenon the parent. - Symmetry is strong. Two large opposite corners (leaf shape) reads as intentional; two adjacent large corners reads as a mistake.
- Don't over-round. A 12px radius on a small 32px button can look mushy — keep the radius well under half the smaller dimension unless you want a pill.
Common use cases
Cards & panels
Soft 16–24px corners for modern UI.
Buttons
From 6px subtle to 9999px full pill.
Avatars
50% radius makes a perfect circle.
Image thumbnails
Rounded thumbs for galleries and feeds.
Leaf shapes
Two opposite corners rounded to the max.
Blob shapes
Asymmetric ellipse syntax for organic forms.
Privacy and accuracy
This border radius generator runs entirely in your browser. All generation happens locally in JavaScript with no server calls. The values you enter are never transmitted, stored or logged.