Shape perfect rounded corners, pills and organic forms visually. Adjust every radius, drag the corner handles and copy clean CSS in one click.
Move from a familiar rounded card to expressive CSS shapes while the generator handles the shorthand.
Link all four corners for speed or fine-tune top-left, top-right, bottom-right and bottom-left independently.
Switch on elliptical radii to combine horizontal and vertical values for blobs, leaves and fluid UI shapes.
Get the shortest valid border-radius declaration, ready for your stylesheet, component or design system.
Choose a shape preset or start with All corners to apply one radius everywhere. Select Individual when you need a different curve on each corner. You can use pixels for fixed rounding or percentages for responsive circles, ellipses and organic forms.
For more expressive shapes, open Advanced curves and enable separate horizontal and vertical radii. Move the sliders or drag the four handles directly on the preview. When the shape looks right, select Copy CSS and paste the generated declaration into your project.
Add the border-radius property to an element. One value rounds every corner; two, three or four values let you create different corner combinations.
Yes. Percentage values respond to the element's width and height, making them especially useful for circles, ellipses and fluid shapes.
CSS places horizontal radii before a slash and vertical radii after it. The generator creates this syntax automatically when Advanced curves is enabled.
Yes. It is completely free, needs no account and creates your CSS locally in the browser.
Keep your frontend workflow moving with these free online CSS generators.