clip-path
Clips an element to a shape: only the part inside the shape stays visible.
Syntax
clip-path: shape();Values
| Parameter | Type | Description |
|---|---|---|
| circle() | function | A circle: `circle(50%)`. |
| polygon() | function | A polygon given by its points: `polygon(50% 0, 100% 100%, 0 100%)`. |
| inset() | function | A rectangle inset from the edges, optionally rounded. |
Examples
A circle, a triangle and a rounded rectangle:
<style>
img { width: 100px; height: 100px; object-fit: cover; margin: 4px; }
</style>
<img src="/media/photo-200x200.jpg" alt="" style="clip-path: circle(50%);">
<img src="/media/photo-200x200.jpg" alt="" style="clip-path: polygon(50% 0, 100% 100%, 0 100%);">
<img src="/media/photo-200x200.jpg" alt="" style="clip-path: inset(10px round 12px);">Notes
The clipped part is not just invisible — it does not react to clicks either. Shapes of the same type with the same number of points can be animated with transition.
See also
- border-radius — Rounds the corners of an element.
- transition — Animates the change of a property from the old value to the new one.
- filter — Graphic effects on an element: blur, black and white, brightness, shadow by shape.
- mask-image — Uses an image or a gradient as a mask: where the mask is opaque the element is visible, where it is transparent the element disappears.
Related recipes
In the tutorial
- Filters — The filter property — blur, black and white, brightness, contrast and the contour shadow drop-shadow, plus backdrop-filter for a frosted glass effect.