What is Border Radius?
This is a visual CSS border-radius generator. Adjust the radius of each corner independently in pixels or percent, see the shape update live, and copy ready-to-use CSS. It is the fastest way to design rounded buttons, cards and avatars without trial and error.
How Border Radius works
The CSS border-radius property accepts up to four values, applied to the top-left, top-right, bottom-right and bottom-left corners in that order.
Example: border-radius: 20px 20px 0 0; rounds only the top corners. Using a percentage like 50% on a square turns it into a circle.
Common uses
- Design rounded buttons, cards and inputs
- Create circles and pills from squares
- Get exact per-corner radius values
- Copy clean CSS straight into your stylesheet
Frequently asked questions
How do I make rounded corners in CSS?
Use the border-radius property. This tool builds the value visually and gives you the code to copy.
How do I make a circle with border-radius?
Set border-radius to 50% on a square (equal width and height) element.
What units can I use?
Pixels (px) for a fixed radius, or percent (%) which scales with the element's size.