CssHow-ToBeginner · 3 min read

How to Use clip-path in CSS: Syntax, Examples, and Tips

Use the clip-path CSS property to define a visible region of an element by specifying a shape like circle(), polygon(), or inset(). This property clips the element to the shape, hiding parts outside it. Apply it by setting clip-path with a shape function or URL referencing an SVG clip path.

📐

Syntax

The clip-path property defines the visible area of an element using shapes or SVG references.

Basic syntax: clip-path: shape();
Common shapes: circle(), ellipse(), polygon(), inset()
URL syntax: clip-path: url(#clipPathID); to use SVG clip paths

Coordinates and sizes are usually in percentages or length units relative to the element.

css

/* Basic clip-path syntax examples */
div {
  clip-path: circle(50% at 50% 50%); /* circle with radius 50% centered */
}

/* Polygon example */
div {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* rectangle shape */
}

/* Inset example */
div {
  clip-path: inset(10% 20% 10% 20%); /* inset rectangle with offsets */
}

💻

Example

This example clips a square div into a circle shape using clip-path: circle(). The visible area is a circle in the center, hiding corners.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>clip-path Circle Example</title>
<style>
  .clipped-circle {
    width: 200px;
    height: 200px;
    background-color: #4a90e2;
    clip-path: circle(50% at 50% 50%);
    margin: 40px auto;
  }
</style>
</head>
<body>
  <div class="clipped-circle"></div>
</body>
</html>

Output

A blue square box 200px by 200px with its corners clipped so it appears as a perfect circle centered in the page.

⚠️

Common Pitfalls

Not specifying the shape center or size correctly can clip too much or too little.
Using clip-path on inline elements has no effect; use block or inline-block elements.
Older browsers may not support all shape functions; check compatibility.
For polygons, incorrect coordinate order can create unexpected shapes.

Example of a common mistake and fix:

css

/* Wrong: polygon points not closed or ordered */
div {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%); /* missing last point to close shape */
}

/* Right: polygon points closed in order */
div {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0% 0%);
}

📊

Quick Reference

Here is a quick guide to common clip-path shapes:

Shape	Description	Example Syntax
circle()	Circle shape with radius and center	circle(50% at 50% 50%)
ellipse()	Ellipse shape with radii and center	ellipse(40% 60% at 50% 50%)
polygon()	Custom polygon with points	polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)
inset()	Inset rectangle with offsets	inset(10% 20% 10% 20%)
url()	Reference to SVG clip path	url(#myClipPath)

✅

Key Takeaways

Use clip-path to create visible shapes by clipping parts of an element.

Common shapes include circle, ellipse, polygon, and inset with coordinates relative to the element.

Always test your shapes visually to ensure correct clipping and shape closure.

clip-path works only on block or inline-block elements, not inline elements.

Check browser support for advanced shapes and fallback if needed.