It's the property that rounds the corners of an element. It accepts values in px, %, rem or any CSS unit, and can control all four corners independently.
CSS Border Radius Generator
Adjust each corner individually — elliptical, uniform or blob — with copyable CSS.
The CSS border-radius property accepts up to eight distinct values when elliptical notation is used — each corner can have independent horizontal and vertical radii.
In its simplest form, border-radius applies the same radius to all four corners. But the spec allows controlling each corner individually and even setting horizontal and vertical radii separated by a slash, creating elliptical shapes. This makes it possible to build anything from lightly rounded cards to organic blob shapes. The 50% value is the most well-known — it turns any square element into a perfect circle. The four-value shorthand follows clockwise order: top-left, top-right, bottom-right, bottom-left, consistent with the general box model convention.
Choose presets or adjust corner by corner.
- Select the unit (px or %) and tap a preset to start from a ready-made shape.
- In per-corner mode, adjust each corner independently. Enable the elliptical option for different X and Y radii.
- Copy the generated CSS and use it directly in your project.
Sources and references for this tool
These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.