What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
clip-path: path() clips an element to a shape described with SVG path data. It is useful when you have fixed-coordinate geometry—such as a path exported from vector artwork—but its coordinates do not automatically resize with the element. For fluid, responsive shapes, CSS shape() is generally the better fit.
What does clip-path: path() do?
A clip path defines which parts of an element remain visible: content inside the clipping region is shown, and content outside it is hidden. The path() CSS basic shape accepts SVG path data. The same path-data foundation is used by SVG’s d attribute and other web features; the W3C’s SVG Paths Working Draft describes that shared role.
MDN lists path() as widely available across browsers since July 2020, while noting that support for particular syntax details can vary. See the MDN path() reference and MDN clip-path reference.
How to write a basic clipping path
Put SVG path data inside one quoted string passed to path(). This example clips a 240-by-180-pixel card into a shape with a pointed lower edge:
Recommended Free Tools
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.card {
width: 240px;
height: 180px;
background: linear-gradient(135deg, #ff7a18, #af002d 70%);
clip-path: path("M 0 0 L 240 0 L 240 140 L 120 180 L 0 140 Z");
}The path starts at the top-left, traces the top and sides, dips to a point at the bottom, then closes back to its start. Its coordinates are in CSS pixels; they are not percentages of the element.
Common SVG path commands
Mmoves the current point without drawing a line.Ldraws a straight line to a point.Cdraws a cubic Bézier curve.Adraws an elliptical arc.Zcloses the current subpath.
Uppercase commands use absolute coordinates; lowercase forms of SVG commands generally use relative coordinates. For clipping, you can optionally put a fill rule before the path string, as in path(evenodd, "…") or path(nonzero, "…"). The fill rule determines how enclosed regions are interpreted, which matters for paths with holes or overlapping subpaths.
Why does the shape not resize with the element?
When no geometry box is specified, the clip path uses the element’s border box as its reference box. That does not make the path coordinates proportional: a point at 240 140 remains at those fixed coordinates if the element’s dimensions change. MDN documents that path lengths are implicitly pixels and that CSS variables cannot be used with var() to construct the path string.
As a result, a path authored for one size can look misplaced or cover only part of a differently sized element. If the element’s dimensions are intentionally fixed, this behavior may be exactly what you want. For a component that must grow or shrink fluidly, use a responsive shape definition instead.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Should you choose path() or shape()?
| Consideration | path() |
shape() |
|---|---|---|
| Coordinates | Path lengths are implicitly pixels. | Can use percentages. |
| Resizing | Coordinates stay fixed as the element changes size. | Percentage-based geometry can respond to the element’s size. |
| Custom properties | Variables cannot construct the path string with var(). |
Supports custom properties for geometry. |
| Existing SVG data | Accepts SVG path data, useful for reusing fixed-coordinate artwork. | Uses CSS shape commands rather than an SVG path-data string. |
| Authoring | Convenient when you already have path data; coordinates may be hard to adapt across sizes. | Requires CSS shape syntax, but percentages and variables help with fluid layouts. |
For example, this shape() version expresses the same general pointed-bottom silhouette in percentages:
.card {
clip-path: shape(
from 0% 0%,
line to 100% 0%,
line to 100% 78%,
line to 50% 100%,
line to 0% 78%,
close
);
}Choose path() when you need known SVG geometry or deliberately fixed coordinates. Prefer shape() when the clipping geometry should follow a flexible element’s dimensions or be controlled with custom properties. This choice follows from the documented differences in coordinate handling.
What should you check before shipping?
- Test the exact path commands and optional fill rule in the browsers you support; broad availability of
path()does not guarantee identical support for every syntax detail. - Resize the element in the layouts where it will appear. If the clipped region does not adapt as intended, switch to percentage-based
shape()geometry or keep the element’s dimensions fixed. - Check the border, background, and visible content at the clipped edges so the result matches the intended design.
For current syntax details and compatibility notes, consult MDN’s path() reference and clip-path reference. The W3C SVG Paths link above is a 2015 Working Draft and provides standards background, not a current browser-support table.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
