CSS clip-path property

CSS clip-path

Instead of CSS clip property we can use clip-path property.

CSS clip-path property is used to create a clipping region, it specifies which part of the image can be displayed.

Only the region in the clipping region will be displayed, while the image in the outside area is hidden.

This property can have one of the following values circle, ellipse, polygon.


css clip-path values are

  • circle
  • ellipse
  • polygon

Example 1 - circle value for css clip-path property

Try Yourself

Example 2 - ellipse value for css clip-path property

Try Yourself

Example 3 - polygon value for css clip-path property

Try Yourself