Border Radius Generator
Visually design CSS border-radius with per-corner control
Corner Radii
Quick Shapes
Box Color
Preview
CSS Code
CSS
border-radius: 24px;
Tailwind
className="rounded-[24px]"
About the Border Radius Generator
This border radius generator controls each corner of a box independently or all four together, previewing the shape live and outputting the CSS. Presets cover the common cases from a 4-pixel card to a fully rounded pill.
A border radius generator is useful because the shorthand is order-sensitive and easy to get wrong. Four values run clockwise from the top left, and a slash introduces separate horizontal and vertical radii — which is how squircles and leaf shapes are made, and where hand-written CSS usually goes astray.
Corners can be linked so all four move together, or unlinked to build asymmetric shapes such as a card with only its top corners rounded, or a speech bubble. Presets provide the values that come up repeatedly: 4 pixels for tight cards, 8 to 16 for general UI, and a very large value for pills and circles.
A pill is made with a radius larger than half the box height, which is why 999px is used rather than a percentage — it stays fully rounded whatever the height. Percentages behave differently and are worth previewing before committing.
How to use the Border Radius Generator
- Choose linked or per-corner. Link all four corners, or unlink to set them individually.
- Drag the radius sliders. Adjust values and watch the shape update live.
- Try a preset. Use a preset for cards, pills or squircles as a starting point.
- Copy the CSS. Take the border-radius value into your stylesheet.
Border Radius Generator features
- Each corner independently, or all four linked
- Presets from a 4-pixel card to a full pill and a squircle
- Side presets for rounding only the top, bottom, left or right
- Live preview with an adjustable preview colour
- Copy the generated CSS
Frequently asked questions
How do I round only some corners?
Unlink the corners and set each one, or use a side preset — top, bottom, left or right — which rounds two corners and leaves the others square. That is the shape most tabs and cards actually need.
What radius should I use?
4 to 8 pixels reads as a crisp card, 16 to 24 as noticeably soft and friendly, and a full radius gives a pill for buttons and tags. The important thing is consistency: one or two values across a whole interface, not a different one per component.
What is a squircle?
A shape between a square and a circle, with corners that curve more gradually than a plain radius. It is the look Apple uses for app icons, and the preset here approximates it with asymmetric corner values.
Why does a large radius look wrong on a small element?
Because a radius bigger than half the element's smaller dimension is clamped to that half, turning the whole side into a semicircle. On a short button that means you get a pill whether you wanted one or not.