Cropping a profile photo into a perfect circle, giving a banner a diagonal edge instead of a straight line, or gradually revealing an image through a custom shape: all of these effects, impossible with a plain border-radius, become trivial with clip-path.
Its principle is easy to remember: clip-path changes neither the size nor the position of an element on the page, it only decides which portion of that element stays visible, hiding the rest without removing it or altering the underlying Box model.
Definition
clip-path cuts an element's visible area into a geometric shape defined in CSS, a circle, an ellipse, a polygon, or even a path from an external SVG file. Anything outside that shape stays present in the document, with its size and position unchanged, but simply becomes invisible.
.avatar {
width: 120px;
height: 120px;
clip-path: circle(50%);
}The available shapes
| Function | Resulting shape |
|---|---|
circle(radius) | A circle |
ellipse(rx ry) | An ellipse |
polygon(points) | A multi-sided polygon |
inset(margins) | A rectangle offset inward |
A concrete example: a diagonal banner
polygon() draws far more elaborate shapes than a simple circle, by listing a set of points, each with its horizontal and vertical coordinates, connected in writing order to form the outline of the visible shape.
.banner {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}These four points draw a rectangle whose bottom edge slopes diagonally, from the bottom-right corner down to the bottom-left corner, a popular graphic effect on banners and page sections, impossible to achieve with ordinary borders or rounded corners.
Online visual generators let a polygon() be drawn with the mouse and produce the matching coordinates directly, which avoids calculating each point by hand for a shape that gets a little complex.
clip-path touches neither the flow nor the clickable area
One detail often surprises people the first time: whatever gets visually hidden by clip-path still stays present in the document. The space the element reserves in the flow does not shrink to match the new visible shape, and depending on the browser, the area that still receives clicks may correspond to the old rectangular box rather than the clipped shape.
clip-path can itself be animated with a transform or a transition, as long as two comparable shape values are written, with the same number of points for a polygon(). Going from a circle to a square, for instance, does not animate smoothly if the two shapes have a different number of points.clip-path or CSS mask: what is the difference
clip-path is limited to crisp geometric shapes with hard edges, with no possible transparency gradient along the outline. For subtler cuts, with soft edges or based on an image's grayscale values, mask becomes the more suitable tool, at the cost of a slightly more complex syntax.
Frequently asked questions
clip-path work on a background image rather than a whole element?clip-path applies to the element's whole box, image included if it fills the entire space, but not specifically to a background image set with background-image: cropping only the background usually requires css-mask instead.
Yes, clip-path accepts a reference to a clipPath element defined inside an SVG file, which allows far more elaborate cuts than a circle or a polygon, such as a logo or an irregular path hand-drawn in vector software.
clip-path still read by screen readers?Yes, in most cases clip-path removes nothing from the document, which means content hidden visually stays accessible to assistive technology, unlike display: none, which actually removes the element from the experience for everyone.