circle() CSS Function

The circle() CSS function is used to define a circular shape that can be applied to elements, allowing you to mask or clip the visible portion of an element in a perfect circle. It is part of the broader set of shape functions, which let you create complex shapes such as polygons, ellipses, and insets.

When using circle(), you specify the radius of the circle and its center point. The radius can be defined using absolute units like pixels or relative units such as percentages. The center point determines where the circle is positioned inside the element, and by default, it is centered at the midpoint of the element.

For example, using circle(50% at 50% 50%) creates a circle with a radius equal to half the smallest dimension of the element, perfectly centered. If you wanted a smaller circle positioned toward the top-left corner, you might use circle(30% at 20% 20%).

This function works particularly well with overflow hidden elements, images, and div containers, allowing designers to create circular avatars, buttons, or masked image effects without editing the image itself. It also pairs nicely with transition or animation properties to animate the circle's size or position for interactive effects.

An example usage could be:

.avatar {
  clip-path: circle(40% at 50% 50%);
  transition: clip-path 0.3s ease-in-out;
}
.avatar:hover {
  clip-path: circle(50% at 50% 50%);
}

This creates a circular mask on an element that grows slightly when hovered over, providing a smooth, dynamic visual effect.

The circle() function is widely supported in modern browsers and is a lightweight way to achieve circular clipping without additional images or SVGs.