How to Create Circles in CSS With border-radius and circle()

Let’s look at a few tricks in CSS able to create basic shapes like circles.

<div class="circle"></div>

Border-Radius #

For this case need to use the border-radius property and set the value to 50%. Then combine the height and width properties with a matching value.

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: lightgreen;
}

Circle() #

In this one, clip-path: circle() does the drawing: it hides every part of the square that falls outside a circle. shape-outside: circle() does not change how the element looks. It only changes how text wraps around it, and only when the element is floated (more on that below).

.circle {
  width: 100px;
  height: 100px;
  clip-path: circle();
  shape-outside: circle();
  background: yellow; 
}

Why 50% makes a circle #

A percentage in border-radius is measured against the element’s own size: the horizontal radius against its width, the vertical radius against its height (MDN: border-radius). On a square, 50% on every corner means the four curves meet in the middle, which gives a circle. On a rectangle the same rule gives an oval, so a 200px by 100px box with border-radius: 50% turns into an ellipse.

A circle that scales with its container #

Fixed pixel sizes are fine for icons. For anything that should grow with the layout, set one dimension and let aspect-ratio work out the other:

.circle {
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: lightgreen;
}

Inside a 500px container this rendered as a 150px by 150px circle in Chrome. aspect-ratio is supported in Chrome 88+, Firefox 89+ and Safari 15+ (MDN: aspect-ratio).

Where shape-outside earns its place #

shape-outside applies only to floats. Float the circle and the text next to it follows the curve instead of a straight edge:

.circle {
  float: left;
  width: 100px;
  height: 100px;
  clip-path: circle();
  shape-outside: circle();
  background: yellow;
}

Lines of a paragraph placed beside the float start at different distances from the left edge, tracing the circle. Without the float, shape-outside has no effect at all.

Border-radius or clip-path? #

Use border-radius for most circles. It keeps borders and shadows: a box-shadow follows the round edge. clip-path cuts away everything outside the circle, the shadow included. Give both versions the same 20px red box-shadow and the red ring shows around the border-radius circle but is gone from the clip-path one. Reach for clip-path when you need a shape that border-radius can’t draw, such as a polygon.