Eight radii, one clean rule
CSS Border Radius Generator
Shape all four corners, split horizontal and vertical radii for ellipses, and see when CSS scales overlapping curves. The compact vendor-free rule is generated locally.
Corner controls
Values are clockwise from top left. Radii accept 0–10,000 with up to four decimal places.
Presets
Preview size
Live preview and CSS
How the border-radius shorthand maps corners
The lists run clockwise: top left, top right, bottom right, bottom left. One value applies everywhere; two values form diagonal pairs; three values share the second value between top right and bottom left; four values are fully independent. This generator compresses only when expanding the shorter form reproduces the same four values.
Elliptical corners and the slash
A radius has a horizontal and a vertical component. When those four component lists differ, CSS places the horizontal list before a slash and the vertical list after it, such as 40px 10px / 20px 50px. Each side of the slash is compressed independently. If both expanded lists are identical, the slash is redundant and is omitted.
Why the browser can draw smaller radii
Large radii remain valid CSS. When adjacent radii would overlap along an edge, the browser multiplies every radius by one common factor so the curves fit. The report calculates that factor for this preview using the rule in CSS Backgrounds and Borders Level 3. A different box size—or a different font basis for em/rem—can produce another used shape without changing the declaration.
Units, practical limits, and privacy
Pixels are fixed CSS lengths. Percentages resolve horizontally against box width and vertically against box height. The preview fixes its own font size at 16 px for em; rem follows the page root. Test the copied rule on the real component, particularly when its size changes. Border radius does not create a mathematical superellipse or clip overflowing children automatically.
The output uses the standard unprefixed property; current browsers do not need historical -webkit- or -moz- duplicates. Inputs, preview, copying, and file creation stay in this page. Candidate code performs no fetch, upload, persistence, cookie, session, database, analytics, or shared-state write.