CSS circle() Function

CSS circle() Function

The CSS circle() function defines a circular shape using a radius and an optional center position. It is commonly used with the clip-path property to clip an element into a circle and with shape-outside to make text wrap around a circular shape. The function belongs to the CSS <basic-shape> data type.

Syntax

circle()
circle(radius)
circle(at position)
circle(radius at position)

The radius and center position are optional. When omitted, the radius defaults to closest-side and the center defaults to center.

For example:

.example {
  clip-path: circle(50%);
}

This creates a circular clipping region centered within the element's reference box.

To specify both radius and position:

.example {
  clip-path: circle(60px at 40% 50%);
}

The circle has a 60-pixel radius, with its center positioned 40% from the left and 50% from the top of the reference box.

Additional examples:

clip-path: circle();
clip-path: circle(80px);
clip-path: circle(40%);
clip-path: circle(at center);
clip-path: circle(closest-side);
clip-path: circle(farthest-side at top left);
clip-path: circle(70px at right center);

The at keyword separates the radius from the optional position.

Parameters

The circle() function accepts two optional parameters.

Both parameters may be omitted:

clip-path: circle();

This uses the default radius and center position.

Only the position may be specified:

clip-path: circle(at 25% 50%);

The radius defaults to closest-side, and the center is moved to the specified coordinates.

Only the radius may also be specified:

clip-path: circle(75px);

The circle remains centered within the reference box.

How It Works

The circle() function defines a circular region relative to a reference box.

The browser determines the circle's center and radius from the supplied values.

For example:

.box {
  width: 200px;
  height: 200px;
  clip-path: circle(80px at center);
}

The reference box is 200 pixels wide and 200 pixels tall. The circle has an 80-pixel radius and is centered at 100 pixels horizontally and vertically.

Only the content inside the circular region is visible when the function is used with clip-path.

When used with shape-outside, the circle defines the boundary around which inline content flows next to a floated element.

The function does not change the element's actual rectangular layout box.

It defines a shape used by the receiving CSS property.

Radius Values

The radius determines the distance from the center of the circle to its edge.

It can be defined using a length, percentage, or radius keyword.

Examples:

clip-path: circle(60px);
clip-path: circle(40%);
clip-path: circle(closest-side);
clip-path: circle(farthest-side);
clip-path: circle(closest-corner);
clip-path: circle(farthest-corner);

The closest-side value is the default when no radius is specified.

Corner-based radius keywords are newer additions and may have different browser support from the widely available basic syntax.

Position Values

The optional position determines where the center of the circle is located.

Positions use the same general syntax as CSS background positioning.

For example:

clip-path: circle(60px at center);
clip-path: circle(60px at top left);
clip-path: circle(60px at bottom right);
clip-path: circle(60px at 25% 75%);
clip-path: circle(60px at 100px 80px);

Common position keywords include:

Moving the center changes which part of the element is included inside the circular shape.

For example:

.example {
  clip-path: circle(70px at 25% 50%);
}

This shifts the circle toward the left side of the reference box.

If the circle extends beyond the element's reference box, only the overlapping rendered content is visible when using clip-path.

Percentage Radius

A percentage radius is calculated using both the width and height of the reference box.

Unlike a percentage width or height, the percentage is not based on only one dimension.

The reference length is calculated using:

sqrt(width² + height²) / sqrt(2)

The percentage is then applied to that reference length.

For a square reference box measuring 200 by 200 pixels:

clip-path: circle(50%);

The resulting radius is 100 pixels.

For a rectangular box measuring 300 by 200 pixels, the same percentage produces a radius of approximately 127.5 pixels.

This is why circle(50%) does not necessarily touch the nearest side of a rectangular element.

To create a circle whose radius reaches the nearest side, use:

clip-path: circle(closest-side);

This is particularly useful when the reference box is not square.

Using circle() with clip-path

The clip-path property is one of the most common uses of circle().

It controls which portions of an element remain visible.

For example:

.circle-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  clip-path: circle(50%);
}

This clips a square image into a circle.

The same technique works with backgrounds and other HTML elements:

.circle-box {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #0066cc, #66ccff);
  clip-path: circle(45% at center);
}

The element's background is visible only inside the circular clipping region.

Changing the center position changes the visible area:

.circle-box {
  clip-path: circle(45% at 25% 50%);
}

The circular clipping region moves toward the left.

Clipping does not change the dimensions used by the surrounding layout. The element still occupies its original rectangular space.

Using circle() with shape-outside

The shape-outside property uses circle() to control how text flows around a floated element.

For example:

.shape-circle {
  float: left;
  width: 140px;
  height: 140px;
  margin: 0 15px 10px 0;
  background-color: #0066cc;
  border-radius: 50%;
  shape-outside: circle(50%);
}

Text next to the floated element follows the circular shape rather than wrapping around the full rectangular box.

The shape-outside property does not visually clip the element.

To make the visible element circular as well, use border-radius or clip-path.

For example:

.shape-circle {
  float: left;
  width: 140px;
  height: 140px;
  shape-outside: circle(50%);
  clip-path: circle(50%);
}

Here, shape-outside controls text wrapping, while clip-path controls the visible shape.

The element must be floated for shape-outside to affect surrounding inline content.

Transitions and Animations

The circle() function can be animated when used with properties such as clip-path.

For example:

.circle-reveal {
  clip-path: circle(25% at center);
  transition: clip-path 0.4s ease;
}
.circle-reveal:hover {
  clip-path: circle(70% at center);
}

The circular clipping region expands when the element is hovered.

The center can also move:

.circle-move {
  clip-path: circle(30% at 25% 50%);
  transition: clip-path 0.4s ease;
}
.circle-move:hover {
  clip-path: circle(30% at 75% 50%);
}

This moves the circular clipping region from left to right.

For reliable interpolation, use compatible radius values and shape structures at both ends of the transition.

Provide a reduced-motion alternative when the animation is not essential:

@media (prefers-reduced-motion: reduce) {
  .circle-reveal,
  .circle-move {
    transition: none;
  }
}

Animations should not hide important content or interfere with keyboard interaction.

Example

The following example compares three circular clipping regions using different radius values.

Each sample uses the same square background to show how the radius changes the visible area.

HTML:

<div class="circle-demo">
  <div class="circle-demo-item">
    <span>circle(25%)</span>
    <div class="circle-demo-sample circle-small"></div>
  </div>
  <div class="circle-demo-item">
    <span>circle(40%)</span>
    <div class="circle-demo-sample circle-medium"></div>
  </div>
  <div class="circle-demo-item">
    <span>circle(50%)</span>
    <div class="circle-demo-sample circle-large"></div>
  </div>
</div>

CSS:

.circle-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.circle-demo-item {
  width: 140px;
  text-align: center;
}
.circle-demo-item span {
  display: block;
  margin-bottom: 10px;
}
.circle-demo-sample {
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #0066cc, #66ccff);
}
.circle-small {
  clip-path: circle(25%);
}
.circle-medium {
  clip-path: circle(40%);
}
.circle-large {
  clip-path: circle(50%);
}

The first circle has the smallest radius, while the third reaches the sides of its square reference box.

The original dimensions of all three elements remain unchanged.

Position Example

This example demonstrates how the at keyword moves the center of a circular clipping region.

All three circles use the same radius but different positions.

HTML:

<div class="circle-position-demo">
  <div class="circle-position-item">
    <span>at 25% 50%</span>
    <div class="circle-position-sample circle-position-left"></div>
  </div>
  <div class="circle-position-item">
    <span>at center</span>
    <div class="circle-position-sample circle-position-center"></div>
  </div>
  <div class="circle-position-item">
    <span>at 75% 50%</span>
    <div class="circle-position-sample circle-position-right"></div>
  </div>
</div>

CSS:

.circle-position-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.circle-position-item {
  width: 140px;
  text-align: center;
}
.circle-position-item span {
  display: block;
  margin-bottom: 10px;
}
.circle-position-sample {
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #cc3366, #ffcc33);
}
.circle-position-left {
  clip-path: circle(40% at 25% 50%);
}
.circle-position-center {
  clip-path: circle(40% at center);
}
.circle-position-right {
  clip-path: circle(40% at 75% 50%);
}

The first circle is positioned toward the left, the second is centered, and the third is positioned toward the right.

The radius remains unchanged in all three examples.

circle() vs. border-radius

Both circle() and border-radius can produce circular-looking elements, but they work differently.

For a simple circular avatar, border-radius is often sufficient:

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

For a circular clipping region that can move or animate independently, use circle() with clip-path:

.avatar {
  width: 120px;
  height: 120px;
  clip-path: circle(40% at 60% 50%);
}

The best choice depends on whether the design requires rounded corners, clipping, or custom text wrapping.

Common Uses

The circle() function is useful for creating circular clipping regions and content-wrapping shapes.

For example, a circular reveal effect can be created using:

.reveal {
  clip-path: circle(0% at center);
  transition: clip-path 0.5s ease;
}
.reveal:hover {
  clip-path: circle(75% at center);
}

The circular region expands from the center, revealing more of the element.

Limitations

The circle() function has several important limitations.

• It defines a circular shape, not an ellipse. Use ellipse() when separate horizontal and vertical radii are required.
• Negative radius values are invalid.
• Only one radius value is used for a basic circle.
• The radius and position are calculated relative to a reference box.
• Using clip-path does not change the element's layout dimensions.
• Using shape-outside requires a floated element to affect text wrapping.
• Content outside a clip-path region is not visible or available for pointer interaction.
• Some newer radius keywords and positioning syntax may have different browser support.

For example, this is valid:

clip-path: circle(50px at center);

However, this is invalid:

clip-path: circle(-50px);

A circle cannot have a negative radius.

The following is also invalid:

clip-path: circle(50px 80px);

The function does not accept two separate radius values in this form.

To create an elliptical shape, use:

clip-path: ellipse(50px 80px);

Browser Support

The CSS circle() function is Baseline Widely available and has been supported across major browser engines since January 2020.

Basic circular shapes are widely supported with clip-path and shape-outside.

Some newer radius keywords and advanced positioning options may have different compatibility requirements.

For a simple fallback, provide a conventional appearance before the clipping declaration:

.example {
  border-radius: 50%;
  clip-path: circle(50%);
}

Browsers without the required clipping support can still display a rounded element.

You can also use @supports:

@supports (clip-path: circle(50%)) {
  .example {
    clip-path: circle(50%);
  }
}

For current compatibility information, visit Can I Use? and search for CSS clip-path or CSS Shapes.

Specifications

The circle() function is defined in the CSS Shapes Module Level 1 .

The specification defines how a circular basic shape is calculated using a radius, optional center position, and reference box.

Related CSS features include ellipse(), inset(), polygon(), clip-path, and shape-outside.