Grow your CSS skills. Land your dream job.

clip-path

Last updated on:

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" */

  /* current version (doesn't require positioning) */
  clip-path: inset(110px 160px 170px 60px); /* or "none" */

} 

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 system 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. 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. Learn something new everyday :P

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

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

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".