The CSS circle() basic-shape function defines a circular radius for clipping an element or shaping text flow. A radius may use a length, percentage, or keywords such as farthest-side and closest-side. Add at to place the circle’s center at specified x- and y-coordinates measured from the element’s top-left border box. section 14.3
Clip an image to a circle
Apply clip-path: circle(398px) to a 796-pixel-wide eagle image. The radius is half the image width, so the circle reaches its sides; because it exceeds the image height, the rendered result keeps straight top and bottom edges while its sides curve. Reposition and resize the crop with circle(229px at 337px 293px). section 14.3
Use circle() when the visible boundary or text flow should follow a circular shape:
- Pair the same custom-property value with clip-path and shape-outside so a floated image is clipped to a circle while adjacent text wraps around it. section 14.4.2
- Choose a different radius or position to reveal a focal area, such as an eagle’s face and beak, rather than centering the crop. section 14.3
- Compare circle() with ellipse() when horizontal and vertical radii need to differ, or with border-radius when a rounded element can provide the same result. section 14.3 section 14.4.2
- Add shape-margin for separation around wrapped text, while remembering that it cannot extend beyond the floated element’s margin box. section 14.4.2
