CSS:

div{
  width: 200px;
  height: 200px;
  background: teal;
  clip-path: circle(30% at 50% 50%); /* refer remarks before usage */
}

HTML

<div></div>

This example shows how to clip a div to a circle. The element is clipped into a circle whose radius is 30% based on the dimensions of the reference box with its center point at the center of the reference box. Here since no <clip-geometry-box> (in other words, reference box) is provided, the border-box of the element will be used as the reference box.

The circle shape needs to have a radius and a center with (x,y) coordinates:

circle(radius at x y)

View Example

Output: