circle() — circular clips

circle(radius at centerX centerY) creates a circular clip. The radius can be a length or percentage — 50% means the circle touches the edges. Position defaults to the element center. Example: clip-path: circle(40% at 50% 50%) creates a circle at 40% radius centered in the element. Use closest-side or farthest-side keywords for responsive circles.

/* CSS clip-path basic shapes */

/* Circle — center at 50% 50%, radius 50% */
.circle { clip-path: circle(50% at 50% 50%); }

/* Ellipse — 50% horizontal, 30% vertical radius */
.ellipse { clip-path: ellipse(50% 30% at 50% 50%); }

/* Inset — rectangle with optional border-radius */
.rounded-inset { clip-path: inset(10% round 20px); }

/* Polygon — custom shape with x,y coordinate pairs */
.triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.diamond  { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.hexagon  { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }

/* All shapes work with images, divs, and any HTML element */

ellipse() — oval clips

ellipse(radiusX radiusY at centerX centerY) creates an oval. Two radii control horizontal and vertical size independently. clip-path: ellipse(50% 35% at 50% 50%) makes a horizontally wider oval. Like circle(), position defaults to center and you can use closest-side/farthest-side keywords.

polygon() — custom shapes

polygon(x1 y1, x2 y2, ...) defines a shape with any number of vertices. Each pair is a percentage or length coordinate. polygon(50% 0%, 100% 100%, 0% 100%) creates a triangle. More points create more complex shapes — stars, arrows, hexagons, and any custom outline. Points are connected in order and the shape is automatically closed.