Grow your CSS skills. Land your dream job.

clip

Last updated on:

The clip property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area.

.clip-me {  
  position: absolute;  /* absolute or fixed positioning required */
  clip: rect(110px, 160px, 170px, 60px); 

  /* reset/default */
  /* clip: auto; */
} 

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

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.

clip-visual
This image by Louis Lazaris explains the four point system very well.

More Information

Browser Support

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

Current day month ye@r *

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