Page 109 - CSS

Clipping (Circle)

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:

https://riptutorial.com/ 87