• Skip To Content
• News
• Site Map

Misunderstood CSS Clip

Tuesday, February 21, 2006 by Nicholas Gagne

The CSS clip property has to be one of the least used properties in CSS. This is probably because no one really knows when to use it, it doesn't appear to be supported in Internet Explorer, and some people use it incorrectly.

A good way to visualize the clip attribute is if you take a piece of paper with a rectangle cut out of it and place it on top of a photo (just like using a Photoshop layer mask). The area of the rectangular hole, allowing the layer behind it to show through, is what the clip property will specify.

First of all, clip can only be used on absolutely positioned elements. Now that we have that out of the way, let's get into the more complex areas. The format for clip is similar to padding or margin's shorthand method:

div { clip: rect(5px, 40px, 45px, 5px) }

Any similarities to the padding or margin properties stop there. Although it may seem that clip would be used in a "reversed padding" sort of manner, where you would enter the amount of clipping on each side, (personally, I feel this would have been a more intuitive way to go about it) but the W3C chose a different route.

First, you set the shape of the clip. I chose to go with rectangle, but then again I didn't have much of a choice since rect is the only option.

Next, we set the top, right, bottom, and left values respectively. The top and left values will specify the top-left corner of the rectangle mask, relative to your image. So, if these values are set to 0 or auto they will be the same as the top-left corner of your element. Setting the top and left values to 10px will set the starting point 10px to the right and 10px downward from the top-left corner of your element. Setting any value to auto will match that side of the rectangle up with the element.

The bottom and right values will determine the bottom-right corner of the rectangle, relative to your element's top-left corner. Setting the bottom and right values to auto, will match the bottom-right corner of the rectangle up to the bottom-right corner of the element. However, setting these values to 0, will set the bottom-right corner of the rectangle up with the top-left corner of the element, resulting in a full clip. Again, this happens because all values are referenced from the top-left corner of the element. So, setting right to 50px means the right edge of the rectangle is 50px from the left edge of the element.

There is also the option of using negative values which make for an interesting way of positioning elements. An example of this would be to set the top value to -20px, and the rest to auto. Now you will have the same element, but with 20px margin on top.

According to the W3C:

User agents must support separation with commas, but may also support separation without commas, because a previous version of this specification was ambiguous in this respect.

Internet Explorer takes their usual route and ignores the required comma separated values and only supports the optional comma-less method. So, even though using commas is the correct method, you'll need to drop the commas in order for the clip property to work in Internet Explorer (even in IE7). The cross-browser format is as follows:

div { clip: rect(5px 40px 45px 5px) }

Keep in mind that you are allow a space between clip: and rect, but not between rect and the opening parentheses. View an example of the clip property in action.

Now that you are feeling empowered, go out there and clip it up, then let us know how you've put the clip property to use.

• Digg this article
• Add to Del.icio.us
• Read more articles
• Subscribe to RSS Articles Feed