CSS Circle Border Radius Generator
Create perfect circles and circular elements with CSS border-radius. Generate circular avatars, icon containers, and badges — preview live and copy CSS instantly, all client-side.
CSS Border Radius Generator
Design CSS border-radius visually. Adjust each corner independently or link them, choose units, and copy the CSS.
Preview Settings
CSS Output
border-radius: 12px;
Presets
About CSS Border Radius
The border-radius property rounds the corners of an element. You can set a single value for all corners or specify each corner individually.
Shorthand: border-radius: top-left top-right bottom-right bottom-left — values go clockwise from the top-left corner.
Units: Use px for fixed rounding, % for proportional rounding (50% on a square creates a circle), em/rem for scalable rounding relative to font size.
Pill shape: Set a very large pixel value (e.g. 9999px) on a rectangular element to create a fully rounded pill shape. This works because the radius is clamped to half the element's dimension.
Elliptical corners: CSS also supports separate horizontal and vertical radii using the border-radius: h-radius / v-radius syntax for asymmetric curves, though this generator focuses on circular (uniform) corners.
What is a CSS circle with border-radius?
Setting border-radius: 50% on a square element creates a perfect circle in CSS. This is the standard technique for circular profile avatars, round buttons, status indicators, and badge elements. The 50% value tells the browser to round each corner by half the element's dimensions, which on a square produces a perfect circle. For non-square elements, 50% produces an ellipse.
Common use cases
Circular border radius is used for user profile avatars and thumbnails, round action buttons (like floating action buttons in Material Design), status indicator dots, notification badges, round icon containers, and decorative circular elements. It is one of the most commonly used CSS techniques in modern UI design.
Frequently Asked Questions
How do I make a perfect circle with CSS?
Set the element to equal width and height (making it a square), then apply border-radius: 50%. For example: width: 100px; height: 100px; border-radius: 50%. The element must be square for a perfect circle — otherwise you get an ellipse.
Should I use border-radius: 50% or a large pixel value like 9999px?
Use 50% for circles. While 9999px also produces rounded shapes, 50% is semantically correct and works regardless of element size. The 9999px hack was common historically but is unnecessary in modern CSS.