Design FIELD NOTES · 4 MIN READ
CSS clip-path: Cutting Shapes Out of Boxes
How clip-path crops elements with circles, ellipses, insets, and polygons — and where it differs from border-radius.
Every CSS box starts life as a rectangle, and clip-path is the tool that says "paint only the part of this element inside this shape". It is a stencil, not a resize: the element keeps its rectangular footprint in the layout, and the browser simply hides everything that falls outside the region you named. Four shape functions cover most real uses, and all of them speak the same coordinate language — percentages of the element's own box.
circle() and ellipse(): radii around a point
circle(R% at X% Y%) keeps the disc of radius R centered at the point (X%, Y%). The center defaults to the box's middle — circle(50%) is the classic circular avatar crop — and sliding the center point is how you get deliberately off-center crops that look editorial rather than mechanical. An important subtlety: a percentage radius is resolved so the shape stays a true circle relative to the box's dimensions, which is why circle(50%) on a wide banner touches the top and bottom edges but leaves the sides square. When that rounding bothers you, ellipse(RX% RY% at X% Y%) gives separate horizontal and vertical radii and can fill any rectangle's inscribed oval.
inset(): the rectangle with rounded corners
inset(T R B L) shrinks each side inward by the given amounts — the four values follow the same clockwise top-right-bottom-left order as padding and margin — and everything outside the shrunken rectangle is hidden. On its own it is a precision crop tool; add round Npx and the cropped rectangle gains rounded corners, which makes inset() the natural choice for image cards whose visible region must stop short of the box edge. inset(0 round 12px) is a complete rounded-image recipe, and it interacts with overflow: hidden situations more predictably than nested wrappers do.
clip-path: inset(0 0 0 0 round 12px); /* rounded rect, full box */polygon(): vertices and the even-odd rule
polygon() takes a list of vertices — x% y% pairs — connects them in order, closes the path, and hides everything outside. 50% 0% is the top-middle, 0% 100% the bottom-left; the triangle is polygon(50% 0%, 0% 100%, 100% 100%). Diagonal hero-section cuts, notched badges, and tilted card edges are all three-to-six-vertex polygons. Self-intersecting paths (the five-pointed star is the famous case) fill with the even-odd rule, which is exactly why the star's points stay crisp instead of becoming a blob.
Because the coordinates are percentages, the same polygon reshapes itself with the element — a triangular crop on a square tile and on a wide banner are both "the same" triangle, stretched to fit. That responsiveness is the property that makes clip-path shapes reusable across breakpoints.
clip-path versus border-radius
The two get confused because both produce rounded and circular visuals, but they operate on different layers. border-radius reshapes the element's actual box: the background, borders, and box-shadows all follow the rounded outline, and layout is unaffected. clip-path leaves the box alone and masks the painting: the rectangular footprint persists for layout purposes, shadows painted outside the clip vanish, and overflowing children are cut off. Choose border-radius when you want the element to genuinely be rounded; choose clip-path when you want a shape the box model cannot express, or when you must keep the underlying rectangle for spacing reasons.
What clipping does not do
Clipping is purely visual. Hit-testing happens on the original box, so a link positioned in a clipped-away corner is still in the accessibility tree and still receives clicks — the fastest way to ship an invisible-but-clickable button. Keep interactive elements inside the visible region, or apply the clip to a decorative wrapper while the control stays whole. The flip side is useful too: because the layout box survives, clipped elements cause no reflow, and animating the clip value animates paint rather than layout — one reason circle(10%)-to-circle(50%) reveals are cheap and smooth.
Try it yourself
The CSS Clip Path Generator builds all four shape functions with sliders for radii, centers, inset sides, and rounded corners, plus a polygon preset gallery (triangle, diamond, pentagon, hexagon, star, arrow) and a live preview of the exact declaration. For plain rounded rectangles, the Border Radius Generator is the simpler tool; for depth behind the clipped shape, the CSS Box Shadow Generator layers the shadow underneath.