About the Border Radius Generator
The Border Radius Generator shows rounded corners as you set them and writes the shortest border-radius CSS for the result. Round all corners at once, give each corner its own value, or use elliptical corners to make leaf and blob shapes.
Rounded corners are part of almost every interface: buttons, cards, input fields, avatars, badges and tabs. Most of them only need one value, but shapes like a tab with rounded top corners, a speech bubble or an organic blob need the four-value and slash syntax, which is easy to get wrong by hand. The tool handles that syntax for you.
You can work in pixels, percent or rem, resize the preview box to see how the corners react, and start from six presets. Everything runs in your browser.
How to use it
- Choose a modeAll corners uses one value. Each corner gives you four sliders. Elliptical adds a vertical value for each corner.
- Pick a unitChoose px for fixed sizes, % for corners that scale with the box, or rem to follow the page's font size.
- Drag the slidersThe preview updates as you move them. In Elliptical mode, the first slider of each corner is its horizontal radius and the second its vertical radius.
- Try a preset or resizeRounded, Pill, Circle, Leaf, Blob and Tab set everything in one click. The width and height sliders change the preview box.
- Copy the CSSClick Copy CSS and paste the border-radius line into your stylesheet.
Key features
Three modes
One radius for all corners, a separate radius per corner, or elliptical corners with horizontal and vertical radii.
Shortest valid CSS
Repeating values are collapsed the way CSS allows, so 24px 8px 24px 8px becomes 24px 8px, and zero needs no unit.
Three units
px from 0 to 160, % from 0 to 50, and rem from 0 to 10 in quarter steps.
Six presets
Rounded (16px), Pill, Circle (50%), Leaf, Blob and Tab.
Resizable preview
Change the preview from 80 to 320 pixels wide and tall to see how fixed and percentage corners behave.
Private by design
No upload and no account. The CSS is built in your browser.
Examples
The presets
| Preset | CSS |
|---|---|
| Rounded | border-radius: 16px; |
| Pill | border-radius: 90px; |
| Circle | border-radius: 50%; |
| Leaf | border-radius: 80px 0; |
| Tab | border-radius: 16px 16px 0 0; |
| Blob | border-radius: 30% 50% 40% / 40% 30% 50%; |
Pill uses half the shorter side of the preview: 90px for the default 240 × 180 box, or 60px if you make the box 320 × 120 first. Circle gives a true circle on a square box and an oval on a rectangle.
How the shorthand works
With four values, the order is top left, top right, bottom right, bottom left, clockwise from the top left. The tool drops values that CSS can fill in by itself:
| Corners (TL, TR, BR, BL) | CSS |
|---|---|
| 24, 24, 24, 24 | 24px |
| 24, 8, 24, 8 | 24px 8px |
| 24, 12, 0, 12 | 24px 12px 0 |
| 24, 0, 0, 0 | 24px 0 0 |
With two values, the first is for top left and bottom right, the second for the other two. With three, the middle value is used for both top right and bottom left.
Elliptical corners
Switch to Elliptical with the corners above set to 24, 12, 0 and 12, then raise the top left vertical radius to 40:
border-radius: 24px 12px 0 / 40px 12px 0;Values before the slash are the horizontal radii, values after it the vertical radii, each in the same clockwise order. When both sides would be identical, the tool leaves out the slash.
Units
In All corners mode with rem selected, 1.5 gives border-radius: 1.5rem;, which is 24px when the root font size is 16px and grows if visitors enlarge their text. A radius of 0 is written as border-radius: 0; in any unit.
Tips
- For pill-shaped buttons that work at any size, use a very large fixed value such as 9999px instead of the Pill preset's exact number. The corners are capped at half the height automatically.
- Use one radius scale across a design, for example 4, 8, 16 and 24 pixels. Consistent corners make an interface feel tidy.
- Nested elements look best when the inner radius equals the outer radius minus the padding between them.
- Use 50% only on squares when you want a circle. On a rectangle it gives an oval, which may not be what you meant.
- Blob shapes from elliptical corners make friendly backgrounds for avatars and illustrations. Change the preview size to make sure they still look right.
Common mistakes and limits
- Getting the corner order wrongThe order is clockwise from the top left: top left, top right, bottom right, bottom left. It is not top, right, bottom, left like padding.
- Mixing up the two sides of the slashThe values before the slash are horizontal radii, the ones after are vertical. Swapping them flips the shape.
- Expecting % to be relative to one sideA percentage radius uses the width for the horizontal part and the height for the vertical part, so 50% on a rectangle is elliptical.
- Rounding an image without clippingCorners clip the element's own background and border. Children such as images can still stick out unless you add overflow: hidden or round the image too.
- Values larger than the boxBrowsers scale corners down when they overlap, so very large values all end up as a pill or a circle. That is handy, but it can hide mistakes.