The clip-path property clips an element to a specific shape, hiding any part of the element that falls outside the defined shape's boundaries, letting you create non-rectangular visible regions.

Syntax

clip-path: circle(radius) | polygon(points) | ellipse(...) | inset(...);

Deep Dive Course

circle() and ellipse() clip an element to a circular or elliptical region, polygon() clips to an arbitrary shape defined by a list of coordinate points connected in order, and inset() clips to a rectangular region offset inward from the element's own edges, effectively similar to padding but for clipping rather than spacing content. Unlike border-radius, which only rounds an element's corners while keeping its overall rectangular structure, clip-path can create genuinely arbitrary, complex non-rectangular shapes, like a triangle, a star, or an irregular custom polygon, and unlike overflow: hidden, which clips content to the element's own box, clip-path clips to an entirely custom shape independent of that box's actual rectangular boundaries.

1Understanding Clip-path

💡

Use clip-path specifically when a genuinely non-rectangular shape is needed, like a triangle, hexagon, or custom irregular polygon — for simple rounded corners on an otherwise rectangular element, border-radius remains the simpler, more appropriate, and more widely-supported tool.

editor.html

.badge {
  clip-path: circle(50%);
}

localhost:3000

2Practical Example

Here is a real-world application of Clip-path showing how it is used in production CSS code.

editor.html

.ribbon {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

localhost:3000

3Best Practices

Follow these guidelines when working with Clip-path:

1. Use clip-path for genuinely non-rectangular shapes, like triangles, hexagons, or custom polygons, reserving simpler border-radius for basic rounded-corner rectangles

2. Use an online visual clip-path generator tool to interactively design and fine-tune a custom polygon() shape's coordinate points, rather than calculating them entirely by hand

3. Remember clip-path only affects an element's visible rendering, it doesn't change the element's actual layout size or its interactive click target area, which can create a mismatch worth being aware of for interactive clipped elements

⚠️

Tip: Use clip-path specifically when a genuinely non-rectangular shape is needed, like a triangle, hexagon, or custom irregular polygon — for simple rounded corners on an otherwise rectangular element, border-radius remains the simpler, more appropriate, and more widely-supported tool.

editor.html

.badge {
  clip-path: circle(50%);
}

localhost:3000

Examples

Example 01Basic Usage

.badge {
  clip-path: circle(50%);
}

Example 02Advanced Example

.ribbon {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

Best Practices

Use clip-path for genuinely non-rectangular shapes, like triangles, hexagons, or custom polygons, reserving simpler border-radius for basic rounded-corner rectangles
Use an online visual clip-path generator tool to interactively design and fine-tune a custom polygon() shape's coordinate points, rather than calculating them entirely by hand
Remember clip-path only affects an element's visible rendering, it doesn't change the element's actual layout size or its interactive click target area, which can create a mismatch worth being aware of for interactive clipped elements

Interview Question

Why can clip-path create shapes, like a triangle or star, that border-radius fundamentally cannot, even though both properties visually affect an element's outer boundary?▼

Hint: Think about what border-radius is actually doing to an element's existing rectangular shape, versus what clip-path is doing to it instead.

border-radius works by specifically rounding the corners of an element's existing, fundamentally rectangular box, curving the transition at each of the four corners while the element's overall structure remains a rectangle, or a rectangle with rounded corners, at its core, it has no mechanism at all for defining an entirely different, non-rectangular overall shape like a triangle or a five-pointed star. clip-path, by contrast, doesn't modify or round the element's existing rectangular box at all, it instead defines an entirely separate, independent geometric shape, a circle, an arbitrary polygon defined by any number of coordinate points, or other shape functions, and then simply hides, clips away, absolutely any part of the original rectangular element that falls outside that separately-defined shape's boundaries, revealing only the portion that falls within it. This fundamentally different approach, modifying corners of an existing rectangle versus defining and applying a completely separate arbitrary shape as a mask, is exactly why clip-path can produce genuinely non-rectangular silhouettes like triangles and stars that border-radius, limited to rounding an already-rectangular shape's corners, simply has no way to represent.

Exercises

MediumPractice using Clip-path in a real scenario.

View Solution

.badge {
  clip-path: circle(50%);
}

Frequently Asked Questions

Why can clip-path create shapes, like a triangle or star, that border-radius fundamentally cannot, even though both properties visually affect an element's outer boundary?▼

Related Functions

BordersFilterOverflow