CSS Clipping and Masking Clipping (Circle)
Example
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)
Output:
