CSS

Border Radius Generator

Shape each corner independently, or link the four radii to create an even curve.

Result

The preview preserves the exported dimensions. Scroll to inspect a box wider than the available space.

CSS 

.rounded-box {
  box-sizing: border-box;
  width: 320px;
  height: 180px;
  border-radius: 24px 64px 24px 64px;
}

Four values, clockwise from the top left

Choose pixels or percentages and set each corner, or link them to apply the same value. Adjust the box dimensions to check the shape, then copy the generated CSS rule.

The four-value border-radius shorthand follows this order: top left, top right, bottom right, bottom left. For example, 24px 64px 24px 64px alternates smaller and larger corners to create an asymmetric shape.

Pixels versus percentages

Pixel values describe a radius with a fixed CSS length. Percentage values use the box width for each horizontal radius and the box height for each vertical radius. This means 50% on all four corners creates an ellipse on a rectangular box and a circle on a square.

Why a large radius can look smaller

CSS scales corner radii down proportionally when adjacent curves would overlap. A 500px radius is valid on a 320px box, but the visible curve is constrained by its neighbors and the box dimensions. The browser applies the same rule to this preview and the exported CSS.

Try a pill or a card

  • For a rounded card, link the corners and use 16px or 24px.
  • For a pill, use pixel radii larger than half the box height. Using 50% creates an ellipse, which has a different contour on a wide box.
  • The exported dimensions match the preview. Change them in your project if needed, and check percentage radii again after resizing.
  • The tool uses one value per corner. Separate horizontal and vertical radii with slash syntax, borders, and clipping child content are outside its scope. Add overflow: hidden yourself if child content must follow the curve.

Related Tools