The CSS ellipse() basic-shape function defines an elliptical clipping shape with separate horizontal and vertical radii. An optional at clause positions its center using coordinates measured from the element’s top-left border box. section 14.3
Clip an image to an ellipse
Use clip-path: ellipse(300px 170px at 360px 290px); to reveal an elliptical region of an image. The first two values set the horizontal and vertical radii; the coordinates position the ellipse’s center. Clipping hides part of the element but does not change its layout size, so the original space remains occupied. section 14.3
Keep these practical points in mind:
- Size the ellipse close to the element’s dimensions when avoiding large empty clipped areas matters. section 14.3
- Use percentages or length units for the ellipse’s size and position. section 14.3
Listing 14.11 An ellipse clip path
.clipped {
clip-path: ellipse(300px 170px at 360px 290px); #1
}
Inspect the complete ellipse clip-path declaration and its annotated dimensions and position. section 14.3
