CSS clip-path defines a clipping region that determines which parts of an element are visible and which are hidden, effectively cutting the element into any desired shape. The concept originates from SVG (Scalable Vector Graphics), where the clipPath element has been available since the SVG 1.0 specification. CSS adopted and extended this capability through the CSS Masking Module Level 1, making it applicable to any HTML element without requiring SVG markup. Unlike border-radius, which only modifies corners, clip-path can create arbitrary shapes including triangles, pentagons, stars, and complex organic forms.

The clip-path property supports several shape functions. The circle() function creates circular clipping regions with configurable radius and center position. The ellipse() function produces oval shapes with independent horizontal and vertical radii. The inset() function creates rectangular clips with optional rounded corners, useful for creating inset effects or cropping content. The polygon() function is the most versatile, accepting a comma-separated list of x,y coordinate pairs that define the vertices of any polygon. Each coordinate can be specified as a percentage (relative to the element dimensions) or a fixed length, with percentage values enabling responsive shapes that scale with the element.

SVG clipping, accessed through clip-path: url(#clipId), provides even greater flexibility by allowing shapes defined with SVG path syntax including Bezier curves, arcs, and complex compound paths. The SVG path data mini-language uses commands like M (move to), L (line to), C (cubic Bezier curve), Q (quadratic Bezier curve), and A (arc) to describe virtually any shape mathematically. The path() function, introduced in CSS as a native alternative to SVG references, accepts the same path data syntax directly in CSS, eliminating the need for an SVG element in the DOM.

An important behavioral characteristic of clip-path is that clipped areas become non-interactive. Click events, hover states, and other pointer interactions only register within the visible clipped region, not on the hidden portions of the element. However, the element still occupies its full rectangular space in the document flow, meaning surrounding elements are positioned as if the clip-path were not applied. This distinction between visual appearance and layout behavior is significant for design: clip-path changes how an element looks but not how much space it occupies. CSS clip-path transitions are possible when both the starting and ending shapes use the same shape function with the same number of points, enabling creative morphing effects such as a circle expanding to reveal content or a polygon smoothly transforming into a different shape.