circle()

The CSS circle() function allows you to create, you guessed it, circles when used with the shape-outside, clip-path, and offset-path properties.

.shape {
  clip-path: circle(100px);
}

“Drawing” shapes

As with the other functions that produce a basic shape — including ellipse(), inset(), xywh(), polygon(), path() and shape() — you won’t be drawing shapes directly on the screen in the way you’d normally think. You will either be creating a shape for text and elements to flow around (shape-outside), creating a cookie cutter to cut the shape out of another element (clip-path), or creating a shape that another element could move along (offset-path).

Clarification note: Neither path() nor shape() can be used with the shape-outside property like the other basic shape functions.

Reference box

Before we get too deep, let’s discuss the reference box. This is the box upon which the basic shapes used in shape-outside and clip-path is formulated.

By default, the box defined by the outer edges of the margins is the reference box, so a shape must fit inside the reference box to have an effect. If the shape is larger than the reference box, then the outer edges of the element will remain intact, i.e. its unmodified rectangular form.

For the shape-outside property, this means the text and elements will flow around the element as if no shape-outside property was used. For clip-path, it similarly means that nothing will be clipped because the entire element fits within the cookie cutter. If you need to change the reference box, you’ll need to add the appropriate keyword (margin-box, padding-box, border-box, etc.) to clip-path or shape-outside.

The offset-path property is not limited by the reference box in the same way shape-outside and clip-path are limited by it. An offset-path whose shape is well outside the reference box will still allow an element to move along it, however, the reference box used can affect where and how the shape is “drawn.” For instance, offset-path cares about the reference box when you use closest-side or farthest-side to set the radius (discussed in detail below).

Basic usage

Let’s start with an example using the clip-path property so that we can more easily see the size and edges of the circles we create. We’ll go into more detail soon, but you can just give circle() a radius and it will create a rhombus… sorry, I’m being told that’s wrong. It says here… Oh, yes. It makes a circle.

<div class=“circuitous”></div>

.circuitous {
  width: 200px;
  height: 200px;
  background-color: aquamarine;
  clip-path: circle(100px);
}

Next we’ll use it with shape-outside to see text flow around the circle.

Not that, because a shape is floated left or right, only one side of the circle will have text flow around it. So, while the circle is fully there, we only see one side of the circle. It’s similar to how, if we shined a laser at the base of a cylinder, the opposite side of the cylinder would appear in a shadow and its curve would not be seen.

<p>
  **Some text**
  <div class=“circuitous”></div>
  **Some more text**
</p>

.circuitous {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  shape-outside: circle(35%);
  float: left;
}

Notice also that shape-outside does not affect the edges of the element itself, but only the shape around which the content flows. As a result, the text is willing to flow even on top of the corners of the .circuitous element because shape-outside, by virtue of having a circle smaller than the element, has told the text to ignore those edges when flowing around the element.

Lastly, let’s move the circle along a circle path using offset-path:

<div class=“circuitous”></div>

.circuitous {
  width: 200px;
  height: 200px;
  background-color: steelblue;
  /* Cuts the circle out of the element */
  clip-path: circle(100px);
  /* Defines the animated path */
  offset-path: circle(100px);
  offset-distance: 0;
  /* Applies the animation */
  animation: circuitous-offset 5s linear infinite;
}

/* Defines the animation */
@keyframes circuitous-offset {
  from {
    offset-distance: 0;
  }
  to {
    offset-distance: 100%;
  }
}

Syntax

The circle() function takes three parameters. First, the radius of the circle, then the X and Y coordinates where you want the center to be.

<circle()> = circle(
  <radial-size>?
  [ at <position> ]?
)

Radius

You can use just about any css unit for the radius. The percentage used is the percentage of the longest side, so an element that’s wider than it is tall will use the percentage of the width and an element taller than it is wide, will use a percentage of the height.

There are also two keywords you can use instead of numeric values:

• closest-side: This sets the radius to be the distance between the center point of the circle and the closest side of the reference box. As such, the circle will always be smaller than the reference box because the largest distance you can have from within the reference box would be half the distance between the two sides. If you set the center point outside the reference box, the circle won’t have an effect at all, because the closest side will always be reached before it gets into the reference box.
• farthest-side: This sets the radius to the distance between the center point and the farthest side of the reference box. As such, the circle will almost always be larger than the reference box. Only when the reference box is a square and the center point is in the reference box’s center will the circle be fully within the reference box. Otherwise, it will stretch well beyond the confines of the reference box.

Center point

Setting the center point is optional, and leaving it out sets the center point of the circle to the center of the element. Similarly, if you supply only one value, it will be set to the X-value, and the Y-value will be set to center unless you use top or bottom, then the X-value will be set to center. If you include a center point (whether it’s one value or two), you must add the at keyword between the radius and the first coordinate.

Again you can use just about any CSS length units to set the center point, plus keywords: top, right, bottom, left, and center. Despite the default being the center, the center point measurements are relative to the top-left corner. Positive numbers move the point to the right and down.

Browser support

Specification

The CSS circle() function is defined in the CSS Shapes Module Level 1 specification, which became a Candidate Recommendation on June 12, 2025. That means it integrates changes from a previous Candidate Recommendation (Draft or Snapshot) to allow for review and for ease of reference to the integrated specification, but those changes have not undergone a formal review.

Related tricks!

Related