Circle and Avatar CSS Generator
Rounded corners are one thing—perfect circles are another. Use our tool to calculate the exact radius needed for your dimensions.
When to use this solution:
Use this for profile avatars, social media icons, or small notification badges.
Common Use Cases
1Step-by-Step Guide
Set equal width and height
Your element must be a square (e.g., 100px by 100px) to become a perfect circle.
Set radius to 50%
A 50% border-radius on a square always results in a perfect circle.
Apply 'overflow: hidden'
If you have an image inside, ensure it doesn't spill out of the circle boundaries.
Get the Circle CSS
Grab the minimal code needed to round your assets.
Ready to get started?
Use our free tool to solve this problem in seconds. No installation required.
Make Perfect CircleFrequently Asked Questions
Why is my circle an oval?
If your width and height aren't identical, the 50% radius will create an ellipse (oval) instead of a circle.
Can I use large pixel values instead of %?
Yes, setting the radius to half of the width also works, but 50% is more flexible if the size changes.