CSS Border Radius Generator
Free online CSS Border Radius Generator. Visualize and generate border-radius code for all four corners. Supports px and % units.
CSS Border Radius Generator
Free online CSS Border Radius Generator. Visualize and generate border-radius code for all four corners. Supports px and % units.
About CSS border radius
Generates the four-corner shorthand
The generator outputs one border-radius declaration in top-left, top-right, bottom-right, bottom-left order. You can keep all corners linked or unlock them, then choose px or percent units before copying the CSS.
Preview colors stay out of the snippet
Background and box colors are only there to make the radius visible while you tune the shape. The copied code contains only the border-radius property, so you can paste it into an existing button, card, or component style without extra color rules.
FAQ
Common questions and answers about this topic.
Can I set different radii for each corner?
Yes, customize each corner independently — top-left, top-right, bottom-right, and bottom-left — or set all corners at once using the 'All Corners' control.
What units are supported?
Both pixels (px) and percentages (%) are supported. Use percentages to create responsive shapes like circles (50%) or pill shapes.
Can I create circles or pill shapes?
Yes, set all corners to 50% for a perfect circle on a square element, or use large pixel values for a pill/capsule shape on rectangular elements.
Is my data sent to any server?
No, border-radius CSS generation is handled entirely in your browser. Your radius values are processed locally — no data is uploaded.