CSS clip-path

Shape functions

A clip-path draws a shape over the element and hides everything outside of it. Points are x then y, measured from the top left corner of the box.

inset(top right bottom left round r)

Cuts the box inward from each edge, with the same 1 to 4 value order as margin. round adds a border-radius.

circle(r at x y)

r can also be closest-side or farthest-side. The position defaults to the center.

ellipse(rx ry at x y)

A circle with two radii.

polygon(fill-rule, x y, …)

Any number of points, joined in order and closed automatically. The fill-rule is optional.

xywh(x y w h round r)

A rectangle from a position and a size.

rect(top right bottom left round r)

A rectangle where every edge is measured from the top or left edge.

path("M 0 0 …")

An SVG path string. It only takes pixels, so it does not scale with the element.

shape(from x y, …)

Like path(), but with CSS units, percentages and calc(), so it scales. Commands are line, hline, vline, curve, smooth, arc and close, each with to or by.

url(#id)

Uses an SVG <clipPath> element.

Reference box

Add a box after the shape to measure from it, like circle(50%) content-box. The default is border-box, the others are padding-box,content-box and margin-box, plus fill-box,stroke-box and view-box for SVG. A box on its own, likeclip-path: padding-box, clips to that box and keeps its rounded corners.

Good to know

• Clipped parts no longer receive clicks or hover, the hit area follows the shape.
• The element keeps its full size in the layout, only the painting is cut.
• box-shadow and outline get clipped too. Put a filter: drop-shadow() on a wrapper instead.
• Shapes animate when both ends use the same function. Polygons also need the same number of points.
• Percentages resolve against the reference box, x against its width and y against its height.