How do percentage radii differ from px?

A px radius is a fixed length and stays the same as the element resizes; a percentage is relative to the element's own width and height and scales with it. For a pill button that always stays a pill, a very large px value such as 999px is more predictable than a percentage.

What does the second group after the slash mean?

Values before the slash are the horizontal radii of the four corners; values after it are the vertical radii. When the two differ, each corner traces an elliptical arc rather than a circular one, which is how petal and teardrop shapes are made.

CSS / FRONTEND · RUNS IN YOUR BROWSER

CSS Border Radius Generator

Shape each corner independently, including elliptical corners, and copy border-radius.

Supports px and percentage units plus the full elliptical syntax with separate horizontal and vertical radii.

Preview

Preview backdrop

LightDarkTransparent

Generated CSS

border-radius: 18px 18px 18px 18px;

Quick shapes

Unit

px%

Corners

Link all corners

Elliptical corners (split horizontal and vertical)

Corners

About this tool

Set all four corners together or independently. Switch on elliptical corners and each corner splits into a horizontal and a vertical radius, producing the full `border-radius: tl tr br bl / tl tr br bl` form that makes organic blob and teardrop shapes possible. In percentage units the radius scales with the element, and 50% turns a box into an ellipse.

How it works

Choose px or percentage units.
Adjust the four corner radii, and enable elliptical corners for asymmetric shapes.
Copy the border-radius declaration.

Privacy

Every calculation and preview runs inside this browser. Your input is never uploaded, stored, or written to the URL or any log.

Frequently asked questions

How do percentage radii differ from px?: A px radius is a fixed length and stays the same as the element resizes; a percentage is relative to the element's own width and height and scales with it. For a pill button that always stays a pill, a very large px value such as 999px is more predictable than a percentage.
What does the second group after the slash mean?: Values before the slash are the horizontal radii of the four corners; values after it are the vertical radii. When the two differ, each corner traces an elliptical arc rather than a circular one, which is how petal and teardrop shapes are made.

← All CSS / Frontend tools