clip-path

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.
</p>

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.

clip-visual
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" />
</clipPath>

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.

Comments

  1. User Avatar
    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. User Avatar
    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. User Avatar
    Allan McAvoy
    Permalink to comment#

    Learn something new everyday :P

  4. User Avatar
    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. User Avatar
    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. User Avatar
    Phillip
    Permalink to comment#
  7. User Avatar
    Neil
    Permalink to comment#

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

  8. User Avatar
    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. User Avatar
    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);
    }
    
    • User Avatar
      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. User Avatar
    Punit
    Permalink to comment#

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

    .our-genius .style1 {
    float:left;
    position: relative;
    /Chrome,Safari/
    -webkit-clip-path: polygon(0px 424px,491px 500px,415px 0px,0px 0px);
    -ms-clip-path: polygon(0px 424px,491px 500px,415px 0px,0px 0px);
    /Firefox/
    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. User Avatar
    Maxim
    Permalink to comment#

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

  12. User Avatar
    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 !

  13. User Avatar
    Mattias
    Permalink to comment#

    I put together a little demo of three different clipping techniques. Have a look at mattias.pw/pens/2016/08/08/clipping-101/.

  14. User Avatar
    Corby
    Permalink to comment#

    nice little demo there! Also thanks for reminding me about this article. Sadly clip-path hasn’t progressed anywhere near to where I’d wanted it to have by now. Coincidentally I’m working on a site currently where this would have been incredibly useful. Sadly I’ll have to result to SVG’s, maybe one day soon!

  15. User Avatar
    Jean
    Permalink to comment#

    Hi there! Should I have to agree the -o- and -moz- prefix to make it work in non -webkit- browsers?

    @keyframes rotacion-electrica {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    from {
    -webkit-clip-path: circle(60% at 50% 50%);
    clip-path: circle(60% at 50% 50%);
    opacity: 0.9;
    }
    to {
    -webkit-clip-path: circle(60% at 50% 50%);
    -webkit-transform:rotate(0deg);
    clip-path: circle(60% at 50% 50%);
    transform: rotate(360deg);
    opacity: 1;
    }
    }

    Jean Phillip
    http://www.iliiet.com/portal

  16. User Avatar
    Kiran
    Permalink to comment#

    How to use the clip-path property for MS Edge browser? There seems to be no support.
    Also for Mozilla, we have to enable the layout.css.clip-path-shapes.enabled flag to true in order to support this rule, but my end customer might not know that, any workaround for that?

    Any help would be appreciated! :)

  17. User Avatar
    David Csejtei

    What about clipping elements with background images?

    Let’s imagine you have a div tag with simple (non repetitive) background image and want to cut the bottom of this tag. In addition a hover action is needed with 2px solid border. What would be a cross-browser and responsive solution?

    Thanks for the great article!

  18. User Avatar
    Dillan Simmons
    Permalink to comment#

    Clip path = no IE / Edge support. http://caniuse.com/#feat=css-clip-path. Edge has marked it as a medium priority addition… since 2014.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag