The clip-path property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area. There used to be a clip property, but note that is deprecated.

.clip-me {  
  /* deprecated version */
  position: absolute; /* absolute or fixed positioning required */
  clip: rect(110px, 160px, 170px, 60px); /* or "auto" */
  /* values descript a top/left point and bottom/right point */

  /* current version (doesn't require positioning) */
  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  /* values are from-top, from-right, from-bottom, from-left */


The most common use case would be an image, but it's not limited to that. You could just as easily apply clip-path to a paragraph tag and only a portion of the text.

<img class="clip-me" src="thing-to-be-clipped.png">

<p class="clip-me">
  I'll be clipped.

Those four values in inset() (in the CSS above) represent the top/left point and the bottom/right point, which forms the visible rectangle. Everything outside of that rectangle is hidden.

This image by Louis Lazaris explains the four point of the old clip: rect(); syntax very well.

Other possible values:

.clip-me { 

  /* referencing path from an inline SVG <clipPath> */
  clip-path: url(#c1); 

  /* referencing path from external SVG */
  clip-path: url(path.svg#c1);

  /* polygon */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  /* circle */
  clip-path: circle(30px at 35px 35px);

  /* ellipse */
  clip-path: ellipse(65px 30px at 125px 40px);

  /* inset-rectangle() may replace inset() ? */
  /* rectangle() coming in SVG 2 */

  /* rounded corners... not sure if a thing anymore */
  clip-path: inset(10% 10% 10% 10% round 20%, 20%);


Example SVG clip path:

<clipPath id="clipping">
  <circle cx="150" cy="150" r="50" />
  <rect x="150" y="150" width="100" height="100" />

More Information

Browser Support

This information is for the deprecated clip property. Need to do research on clip-path at some point.

The spec says to use commas to separate the values with clip. IE 4-7 support this property, only without the spaces. If using the deprecated clip property, probably safest to use the commas. (reference). If using clip-path, each property has a different way of doing it, but the comparable inset() does not use spaces.

Chrome Safari Firefox Opera IE Android iOS
Any Any Any 7+ 8+ ? 2+

Have seen report of browser on iPad 1 not supporting it.


  1. Louis
    Permalink to comment#

    Hey, glad you liked the image. :)

    Just a quick correction. You said:

    “The spec says to use commas to separate the values. IE 4-7 support this property, only without the spaces.”

    I think you meant to say “…only without the commas” or “…only with spaces”.

  2. Bahman
    Permalink to comment#

    “Those four values represent the “top/left” point and the “bottom/right” point, which forms the visible rectangle. Everything outside of that rectangle is hidden.”

    I think that “top/left” should be “top/right” and “bottom/right” should be “bottom/left”.

  3. Allan McAvoy
    Permalink to comment#

    Learn something new everyday :P

  4. victoria
    Permalink to comment#

    One note is that the commas should actually be avoided if you are supporting legacy versions of IE. Using a space to delineate the T R B L will work cross-browser.

    BTW: We are huge fans of css-tricks here at Noble Desktop. Thanks for doing your thing!

  5. Blieque
    Permalink to comment#

    Great article! Any idea about support on iOS. I’m using a 2nd Generation iPod Touch running iOS 4.2.3, but see no clip effect. Adding a -webkit- prefix does nothing, it seems. Any ideas?

  6. Phillip
    Permalink to comment#
  7. Neil
    Permalink to comment#

    iOS 8 Safari doesn’t seem to support animated clip-paths, as I discovered while using velocity.js.

  8. fredsbend
    Permalink to comment#

    This is pretty cool, but it doesn’t seem to work on the video tag. How might I make this effect on the video tag? I’ve asked this question on StackOverflow.

  9. MP
    Permalink to comment#

    Unfortunately they keep moving the goalposts and this article fails to indicate the before and after syntax which I think is very impotant if you want your clips to work in all browser versions.

    I know that my v34 clips below work but I’m struggling to get the new v35s to work so any help would be appreciated:

    .Rectangle {
    /* Chromium v34 or lower */
    -webkit-clip-path: rectangle(0px, 0px, 100%, 100%, 10%, 10%);
    /* Chromium v35 onwards ? */
    -webkit-clip-path: Inset(0px 0px 100% 100% 10% 10%);
    .Circle {
    /* Chromium v34 or lower */
    -webkit-clip-path: circle(50%, 50%, 50%);
    /* Chromium v35 onwards ? */
    -webkit-clip-path: circle(100% at 50% 50%);
    .Ellipse {
    /* Chromium v34 or lower */
    -webkit-clip-path: ellipse(50%, 50%, 50%, 30%);
    /* Chromium v35 onwards ? */
    -webkit-clip-path: ellipse(farthest-side farthest-side);
    • Joe
      Permalink to comment#

      I’m also interested in this article, I’ll be following but I don’t expect there to be many updates. As clip is now gone and clip-path only has partial support I’m curious as to any other ways to replicate this behavior or are we going to be stuck waiting for better browser support implementation (I really hope not).

  10. Punit
    Permalink to comment#

    it’s not validate for w3cvalidator, error like this Property clip-path doesn’t exist

    .our-genius .style1 {
    position: relative;
    -webkit-clip-path: polygon(0px 424px,491px 500px,415px 0px,0px 0px);
    -ms-clip-path: polygon(0px 424px,491px 500px,415px 0px,0px 0px);
    clip-path: url(“index.html#clipPolygon1”);
    -moz-clip-path: url(“index.html#clipPolygon1”);
    -moz-clip-path: polygon(0px 424px,491px 500px,415px 0px,0px 0px);

  11. Maxim
    Permalink to comment#

    Hi. It’s work for swf content? It tried this for images but flash content is not clipped

  12. M
    Permalink to comment#

    Hi There,

    clip-path ONLY works with a prefix in Webkit.. Perhaps such should be incorporated into this here article…

    Also, the CSS implementation in most Browser is HIGHLY erratic and I suggest anyone that contemplates using Clipping in CSS – do it by simple wrapping the image or element in a surrounding DIV and setting THAT to overflow hidden and thus adjusting the DIV’s (which IS a rectangle) dimensions…

    This works every time – in every browser….

    Clip and clip-path IMPO should be avoided. At least until the people fumbling about with building web-browser, unite and agree…

    Once again, a great proposition goes berserk !

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.