Generate CSS border radius

Create CSS border-radius values for rounded and elliptical corners.

freeworks offlinenothing uploaded
ToolCSS Border Radius Generator
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Corner radii become border-radius shorthand, with optional slash-separated vertical radii for ellipses. Percentages resolve against the corresponding box dimensions.

  • Four-corner shorthand covers common cards.
  • Independent horizontal and vertical values create ellipses.

Worked example

Pill-shaped button
Generate CSS for a fully-rounded pill shape using 50% radius
Input
											Top left: 50
Top right: 50
Bottom right: 50
Bottom left: 50
Unit: %
Output
												/* Border Radius */
.rounded {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;

  /* Individual corners */
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

When to use this

Design systems, button prototypes, and responsive pills generate border radii.

Edge cases

  • Radii larger than half the box are scaled down by the browser.
  • Percentage radii change as the box resizes.
  • Slash syntax is not another circular radius.

References