CSS clip-path Property

You are Here:

CSS clip-path Property

CSS clip-path property creates a clipping region that sets what part of an element should be shown.

Note: Parts that are inside the region are shown, while those outside are hidden.


HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 350px; height: 200px; background-color: #fff; margin-right: 1em; object-fit: fill; } #point{ clip-path: circle(35%); } #point1{ clip-path: ellipse(130px 140px at 10% 20%); } #point2{ clip-path: inset(10% 52% 0px 27px); } #point3{ clip-path: polygon(50% 20%, 90% 80%, 10% 80%);; } </style> </head> <body> <h1>CSS clip-path Property</h1> <h2>clip-path: circle(35%);</h2> <img id="point" src="emotion.jpg"> <h2>clip-path: ellipse(130px 140px at 10% 20%);</h2> <img id="point1" src="emotion.jpg"> <h2>clip-path: inset(10% 52% 0px 27px);</h2> <img id="point2" src="emotion.jpg"> <h2>clip-path: polygon(50% 20%, 90% 80%, 10% 80%);</h2> <img id="point3" src="emotion.jpg"> </body> </html>


Using CSS

element{ clip-path: inset(10% 52% 0px 27px); }

Using Javascript

object.style.clipPath="inset(10% 52% 0px 27px)";


Yes, clip-path property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS clip-path property is none.

Property Value

The following table provides a list of values for CSS clip-path property.

clip-sourceA url referencing an SVG clipPath element.
basic-shapeSpecifies a basic shape to be used. Possible shapes are
  • inset()
  • circle()
  • ellipse()
  • polygon()
  • path()
geometry-boxSpecifies a geometry-box to be used. Possible boxes are.
  • margin-box
  • border-box
  • padding-box
  • content-box
  • fill-box
  • stroke-box
  • view-box
noneNo clipping path is created.

Using JavaScript

In the following example, we will demonstrate how to change the CSS clip-path property of an element using JavaScript.


HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 350px; height: 200px; background-color: #fff; clip-path: inset(10% 52% 0px 27px); } button{ display: block; } </style> </head> <body> <h1>CSS clip-path Property</h1> <img src="emotion.jpg"> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("img")[0]; function myFunction(){ x.style.clipPath = "inset(10% 9% 0px 175px)"; } </script> </body> </html>


Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author