Skip to main content

The clip-path Property

The clip-path property allows you to define a specific geometric shape that an element's content should be clipped to. Only the part of the element that is inside the shape is visible; everything outside is completely cut off.

This powerful property moves CSS beyond the constraints of the rectangular box model, enabling the creation of custom, dynamic shapes for images, containers, and interactive elements.


1. Core Concept​

clip-path uses various shape functions to define a clipping region. Anything outside this region is treated as transparent and non-interactive.

clip-path vs. overflow: hidden​

  • overflow: hidden: Hides content that exceeds the rectangular boundaries of the element's box. The box itself remains a rectangle.
  • clip-path: Changes the visible shape of the element itself, even if the content remains within the original box's boundaries. The element's background, borders, and content are all clipped to the shape.

2. Supported Shape Functions​

clip-path accepts several built-in shape functions, with polygon() being the most versatile.

2.1. inset() (The Rounded Rectangle)​

Clips the element inward from its edges. This is similar to a padded box, but it clips the visual output.

styles.css
/* Clips 10px from top, 20px from right, 30px from bottom, 40px from left */
clip-path: inset(10px 20px 30px 40px);

/* Can also be combined with border-radius */
clip-path: inset(10% round 15px);

2.2. circle()​

Clips the element to a circular shape.

styles.css
/* Creates a circle with a radius of 50% centered at 50% 50% */
clip-path: circle(50% at 50% 50%);

2.3. ellipse()​

Clips the element to an oval shape, defined by two radii (X and Y).

styles.css
/* Creates an ellipse with horizontal radius 30% and vertical radius 40%, centered at 50% 50% */
clip-path: ellipse(30% 40% at 50% 50%);

2.4. polygon() (Custom Shapes)​

This is the function used for complex and custom shapes. It requires a list of coordinates (X Y pairs) that define the vertices (corners) of the shape. Coordinates are relative to the top-left corner of the element (0% 0%).

styles.css
/* Creates a basic downward arrow shape */
clip-path: polygon(
  50% 0%,       /* Top Center */
  100% 100%,    /* Bottom Right */
  0% 100%       /* Bottom Left */
);

3. Animating with clip-path​

One of the most powerful uses of clip-path is for transitions and animations. As long as the two states (start and end) have the same number of points in their polygon() definitions, the browser can smoothly interpolate between the shapes.

Example: Rectangle to Starburst​

styles.css
.starburst-box {
  /* Starting shape: a simple rectangle (4 points) */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 0.5s ease;
}

.starburst-box:hover {
  /* Ending shape: A starburst/diamond shape (4 points) */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
Point Count is Key

If you are transitioning between two polygon() shapes, they must define the same number of coordinates. For instance, transitioning from a triangle (3 points) to a hexagon (6 points) will typically fail or produce unpredictable results.


4. Interaction Caveats​

When you clip an element, the invisible clipped area is also non-interactive.

If you clip an image into a circle, only the pixels within the circle will respond to mouse events (like click or hover). The corners of the original rectangle, though still technically taking up space in the layout, are completely inert.

This is a crucial difference from using transparent backgrounds, where the mouse still interacts with the full bounding box.

Interactive clip-path Demo​

Use the hover state to see a smooth transition between a square and a diamond/starburst shape using polygon().