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 {  
  
  position: absolute;  /* absolute or fixed positioning required */

  /* deprecated version */
  /* clip: rect(110px, 160px, 170px, 60px); or "auto" */

  /* current version */
  clip-path: rect(110px, 160px, 170px, 60px);

  /* reset/default on deprecated version */
  /* clip: auto; */

  /* reset/default on current version */
  clip-path: 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 rect() (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 (inline SVG?) <clipPath> */
  clip-path: url(#c1); 

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

  /* rounded rectangle */
  clip-path: inset(10% 10% 10% 10% round 20%, 20%);

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

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

}

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. IE 4-7 support this property, only without the spaces. Probably safest to use the commas. (reference).

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

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

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?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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