The clip-path property defines a clipping region — the area to which painting can be applied. Anything outside is hidden. Supports shapes, SVG paths, and reference boxes..clip {
clip-path: circle(50%);
}.clip {
clip-path: polygon(0 0, 100% 0, 50% 100%);
}min:0max:9999step:1units:% | px | em | remnoneNo clipping (default).margin-boxMargin box.border-boxBorder box.padding-boxPadding box.content-boxContent box.fill-boxSVG fill box.stroke-boxSVG stroke box.view-boxSVG viewport.circle()Circle — circle(radius at center).ellipse()Ellipse.polygon()Polygon from points.inset()Rectangle with inward offsets.rect()Rectangle with 4 coordinates.xywh()Rectangle xywh(x y w h).path()SVG path.url()url() reference to SVG clipPath.CSS Masking Module Level 1Editor's Draft<basic-shape> <geometry-box>W3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
