Border Radius Generator
Visually design CSS border-radius with linked or per-corner controls, elliptical corners, and presets. Copy clean CSS instantly.
About this tool
border-radius rounds the corners of any box. This generator lets you drag a slider for each corner (or link them all together), switch between pixel and percentage units, and turn on elliptical mode for separate horizontal/vertical radii per corner. The live preview updates as you drag, and the matching CSS is generated instantly.
Example: a uniform 16px on every corner produces border-radius: 16px;. Setting 50% on all four corners of a square produces a perfect circle: border-radius: 50%;. A "pill" shape is achieved with a large radius like 9999px.
Try the presets — Rounded, Card, Pill, Leaf, Blob — as starting points, then fine-tune. The checkerboard backdrop helps you see how transparent gaps render.
FAQ
What is the difference between px and % units? ›
Pixel (px) sets a fixed radius regardless of element size. Percentage (%) is relative to the corresponding dimension of the element — vertical radii are relative to the height, horizontal to the width. Setting 50% on all four corners of a square turns it into a circle; on a non-square box it makes an ellipse.
What does "elliptical" do? ›
In elliptical mode each corner has two radii: one for the horizontal curve and one for the vertical. The CSS uses the slash syntax, e.g. border-radius: 40px 40px 40px 40px / 20px 20px 20px 20px; which gives flatter, more oval-like corners.
How do I make a pill / stadium shape? ›
Set the radius to a value larger than half the element height (or use 9999px). The browser clamps the radius at 50% of the smaller dimension, producing fully rounded left and right edges.
Why does the CSS sometimes show one value and sometimes four? ›
When all four corners are equal the tool outputs the compact single-value form, e.g. border-radius: 16px;. When corners differ it outputs all four in CSS order: top-left, top-right, bottom-right, bottom-left.