Round the corners of any element and copy the CSS.
Last reviewed by the OnlineToolPro team
Set rounded corners visually — the same on every corner or different on each — and copy the shortest correct CSS.
How it works
3 simple steps. No experience needed.
Good to know
Link the corners to round them all equally, or unlink them to set each one between 0 and 200 px — useful for tabs, chat bubbles and cards attached to one edge.
On a square element, a radius of half its width makes a circle. On a wide element, a radius at least half its height gives pill-shaped ends.
FAQ
Top left, top right, bottom right, bottom left — clockwise from the top left.
When all four corners are equal, one value is the shortest correct CSS. Different corners need two to four values.
Other tools you might find useful next.
Generate and tidy up CSS with live previews. 4 free tools.