CSS Clip Path

Imagine holding a flat postcard. If you use standard scissors, you can only cut it along straight lines into rectangular boxes. Now, imagine using a set of custom, shaped paper punches. With a single press, you can punch out the postcard in a perfect circle, a sleek ellipse, or an angled polygon star shape. CSS clip-path is that paper punch. It allows you to crop and clip your elements—including cards and images—into custom geometric shapes natively.

In this page:

Clipping Circular Shapes
Clipping Elliptical Shapes
Clipping Custom Polygons
Referencing SVG clipPaths
Animated Morph Transitions

Clipping Circular Shapes

The circle() function clips an element into a perfect circular shape. You specify the radius of the circle (like 50px or a percentage) and optionally define its center coordinate point.

Note: Use clip-path: circle(50%) to quickly crop any square image into a perfect circle.

Warning: The circle() function only creates a perfect circle if the container is a square; if the container is a rectangle, it can clip awkwardly.

Example: Clipping Circular Shapes

css

<style>
img {
  clip-path: circle(50%);
}
</style>
<img src="https://placehold.co/150x150" alt="Circle clip">

Clipping Elliptical Shapes

The ellipse() function clips an element into an elliptical shape. It accepts two radius values (horizontal radius and vertical radius), allowing you to create smooth, oval-shaped containers.

Note: Use the ellipse() function to build sleek, curved background panels on your pages.

Warning: If your ellipse radius values exceed the container boundaries, the shape will get cut off.

Example: Clipping Elliptical Shapes

css

<style>
.box {
  width: 200px;
  height: 100px;
  background: teal;
  clip-path: ellipse(100px 50px);
}
</style>
<div class="box"></div>

Clipping Custom Polygons

The polygon() function allows you to clip an element into any custom geometric shape by defining a list of coordinate points. The browser connects these points in sequence to build your custom shape.

Note: Use an online clip-path generator (like Bennett Feely's Clippy) to visually design and copy your custom polygon coordinates.

Warning: Make sure you write percentage symbols on all coordinate points to ensure your shapes remain responsive.

Example: Clipping Custom Polygons

css

<style>
.box {
  width: 150px;
  height: 150px;
  background: crimson;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
</style>
<div class="box"></div>

Referencing SVG clipPaths

If your custom shape contains complex curves or vector paths that are difficult to define using standard polygon coordinates, you can use the url() function inside your clip-path property to link to a custom SVG clipPath element.

Note: Combine SVG clip paths with HTML layouts to create complex, high-performance vector crops.

Warning: The referenced SVG clipPath must be defined inside your HTML markup to load correctly.

Example: Referencing SVG clipPaths

css

<svg width="0" height="0">
  <clipPath id="myClip">
    <path d="M0,0 L100,0 L50,100 Z"></path>
  </clipPath>
</svg>
<style>
.box {
  width: 100px;
  height: 100px;
  background: navy;
  clip-path: url(#myClip);
}
</style>
<div class="box"></div>

Animated Morph Transitions

You can animate and morph clip paths smoothly over time using standard CSS transition or animation properties, as long as both the start and end clip-paths have the exact same number of coordinate points.

Note: Use morphing clip paths inside hover states to build engaging, interactive animated card transitions.

Warning: If your start and end clip paths have a different number of coordinate points, the transition will fail to animate and snap instantly instead.

Example: Animated Morph Transitions

css

<style>
.shape {
  width: 150px;
  height: 150px;
  background: orange;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.3s;
}
.shape:hover {
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
}
</style>
<div class="shape"></div>

Common Mistakes

Forgetting that clip-path only changes what's visible, it doesn't resize or reflow the element's actual box, so layout space stays the same.
Using percentage-based polygon points without double-checking them in a visual clip-path generator first, since hand-written coordinates are easy to get wrong.
Applying clip-path to an element with a transparent background and expecting a visible shape outline, when there's nothing but the clipped content itself to see.

Chapter Summary

clip-path crops an element into a custom shape using basic shapes like circle(), ellipse(), and polygon(), or a referenced SVG clipPath.
Clipped-away content is simply hidden, not removed, and the element's original box size and layout position stay unchanged.
Because clip-path is animatable, transitioning between two shapes creates a smooth morphing effect.

Browser Support

The clip-path property with basic shapes is supported by all modern browsers; referencing external SVG clipPath elements is also broadly supported in current browser versions.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Columns Next Lesson → CSS Shapes