CSS Border Radius Generator
Set each corner's radius in px or percent, including elliptical corners with separate horizontal and vertical radii, and copy the shortest border-radius CSS.
Free · No sign-up · Your inputs stay in your browser
Input
Generate a CSS border-radius
Output
CSS
20 characters
Values go clockwise from the top left. A percentage is relative to the box's own width (horizontal radius) and height (vertical radius), so 50% makes a circle of a square and an ellipse of anything else; 9999px makes a pill of any box. When adjacent radii add up to more than the side, browsers scale all of them down proportionally.
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
How the values are read
Four values go clockwise from the top left. Values after a slash are the vertical radii. A percentage is relative to the box: the horizontal radius to its width and the vertical to its height, so 50% gives a circle on a square and an ellipse on a rectangle. When adjacent radii add up to more than the side, browsers scale all radii down proportionally, as the backgrounds specification describes.
Pills and circles
border-radius: 9999px gives a pill on any rectangle, because the radius is clamped to half the shorter side. 50% gives a circle only on a square.