Border Radius Generator

Visually design CSS border-radius with per-corner control

Corner Radii

All Corners24px

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

  1. Choose linked or per-corner. Link all four corners, or unlink to set them individually.
  2. Drag the radius sliders. Adjust values and watch the shape update live.
  3. Try a preset. Use a preset for cards, pills or squircles as a starting point.
  4. 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.