How border-radius works
The border-radius property rounds the corners of an element. You can specify values for the top‑left, top‑right, bottom‑right, and bottom‑left corners in that order, using length or percentage units.
Using the generator
Enter numeric values or percentages for each corner, and the tool outputs the corresponding CSS rule. The preview updates in real time, so you can see exactly how the element will look before copying the code.
Advanced elliptical corners
To create an ellipse instead of a circle, use the slash syntax: border-radius: 50% / 50%. The first set of values controls the horizontal radius, the second set controls the vertical radius, allowing independent shaping of each corner.
Browser support
All modern browsers support the border-radius property, including Chrome, Firefox, Safari, Edge, and Opera. No vendor prefixes are required for current versions.
More CSS generators
Pair rounded corners with a CSS text shadow generator to add depth to headings and buttons.