Question 1

What is CSS clip-path?

Accepted Answer

clip-path is a CSS property that crops an element to a shape — a polygon, circle, ellipse or inset rectangle. Only the area inside the shape is painted; the rest is clipped away while the element still occupies its normal space in the layout. It works on almost any element, including images, divs and videos.

Question 2

What do the percentages in polygon() mean?

Accepted Answer

Each polygon() point is written as two percentages, x% y%. The first is the horizontal position from the left edge (0%) to the right edge (100%) of the element's box; the second is the vertical position from the top (0%) to the bottom (100%). polygon(50% 0%, 0% 100%, 100% 100%) therefore draws a triangle with its apex at the top-center.

Question 3

How are circle() and ellipse() different from polygon()?

Accepted Answer

polygon() builds a straight-edged shape from a list of points, so it is ideal for stars, arrows and custom outlines. circle() and ellipse() create smooth curved clips defined by a radius (or two radii) and a center point, written like circle(50% at 50% 50%). Use them when you want rounded shapes instead of angular ones.

Question 4

Which browsers support clip-path?

Accepted Answer

clip-path with basic shapes (polygon, circle, ellipse, inset) is supported in all modern browsers — Chrome, Edge, Firefox and Safari. Older Safari versions need the -webkit-clip-path prefix, which pairs naturally with the standard property. Always test if you must support legacy browsers.

Question 5

Can I use clip-path on images?

Accepted Answer

Yes. clip-path works directly on img elements as well as background images, videos and any block. Apply the generated clip-path: polygon(...) rule to the image and it is cropped to your shape with no extra masks or SVG. The image keeps its original dimensions; only the visible area changes.

Clip-PathGenerator

Clip-Path
Generator