CSS clip-path explained: shapes, hit areas and shadows

Clip-path is simple to start and has three surprises. This guide covers all of them.

The shapes

• circle(50% at 50% 50%): a circle with a radius of 50% of the box, centred. 50% is relative to the box (for a circle, to the shorter side).
• ellipse(50% 35% at 50% 50%): two radii.
• inset(10% 20% round 16px): a rectangle cut in from the top, right, bottom and left (one to four values) with optional rounded corners.
• polygon(50% 0%, 100% 100%, 0% 100%): any straight-edged shape from a list of points. This one is a triangle.
• path('M 10 80 C 40 10 ...'): a drawn path in pixels, useful for curves, but not responsive.

Surprise 1: shadows and borders are cut

Everything outside the shape is invisible, including the element's own box-shadow and any part of its border outside the shape. To get a shadow around a clipped shape, put the element inside a wrapper and give the wrapper filter: drop-shadow(...).

Surprise 2: the clipped part is not clickable

The area outside the shape does not take clicks, taps or hover. We tested a hexagon in current Chrome and WebKit on 13 November 2026: a point in the corner of the box but outside the hexagon did not hit the element, and a point in the middle did. This is helpful for diamond-shaped buttons and surprising for anything else.

Surprise 3: percentages follow the box

Because positions are percentages of the element, a polygon on a wide box is stretched. If you want a regular hexagon, give the element a width and height in the right ratio (a regular hexagon with flat top and bottom is about 1.15 times as wide as it is tall).

Animating

Between two polygons with the same number of points, transition: clip-path 0.4s moves each point smoothly. A circle growing from circle(0% at 50% 50%) to circle(75% at 50% 50%) makes a nice reveal. Respect reduced motion.

Use with images

Clip-path on an <img> turns a rectangular photo into a hexagon or a slanted banner without editing the file. For diagonal section dividers, a polygon such as polygon(0 0, 100% 0, 100% 85%, 0 100%) on the section slants the bottom edge.

Accessibility

Clipping does not change what screen readers see. Make sure text inside the shape is not cut off at the corners, and check focus outlines: the outline of a clipped element is also clipped.

This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.