clip has been a misunderstood and ignored CSS property for a long time. That is beginning to change with the emergence of related CSS3 properties such as background-clip, but clip itself has been present in the spec since CSS 2.1.

clip is perhaps best understood as a “window” through which portions of content may be seen. While this window may be of any dimension, the visible clip area is always rectangular. clip is only applicable to elements that are positioned absolute.

You have likely witnessed clip in action without really seeing it: an absolutely positioned <div> with a too-small height and width applied and overflow:hidden applied will clip its content, but clip itself is more powerful than that.

Before we begin, it’s important to understand the order of coordinates for clip and what they mean.

The clip area is given as a series of numbers. These numbers are top, right, bottom and left offsets for the clip area from the top and left of the image. They are specified in the same order as the shortcuts for specifying all sides when setting margin and padding in the box model. If you have difficulty recalling the order, just remember the acronym TRBL, pronounced “trouble”.

So if we wanted to clip an absolutely positioned image like this to show just the eyes, we would work out the clipping area coordinates as offsets from the top and left of the picture:

And apply them to our CSS as follows:

img#audrey-hepburn {
	clip: rect(165px,564px,260px,218px);
	position: absolute;
}

At this stage your objection might be “but why would I want to do that? if I only wanted to show a portion of an image, I’d use PhotoShop to crop the image down so I could only see that part. Otherwise, I am loading the entire image to only show a small area of it, which increases my page loading time.”

In most cases you would be totally correct. However, as you will see, clip is useful in all sorts of circumstances.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.