We Are Communication Architects

Building brand awareness through content creation and community engagement.

January 18th, 2013

CSS Clip Property Explained

It wasn’t until recently that I became curious with the Clip property in CSS. It’s not a commonly used property and I think part of the reason may be due to some misunderstanding on how to use it. I must say it’s one of the less intuitive properties to use but not that difficult once you get used to it. So let me try to say something that’s already been said before, but in a way that may reach you differently. For illustration, we’ll use a 500px x 300px image that has overlaying grids of 100px x 100px.

It’s important to note this can only be applied to absolutely positioned elements. The clip property takes a shape declaration. Currently only a rectangle, rect(), is supported and it takes values in the normal order of Top, Right, Bottom, Left. So, for example:

img {clip: rect(20px, 40px, 40px, 20px); position: absolute;}

As you can see, the values are comma separated. Here’s where it gets tricky. When you are specifying the Right and Bottom values, those are actually the distances from the Top and Left of the image as well. And one more hurdle, if you’re not using a clipped area from the top left corner, you will need to use the absolute positioning to ‘pull’ the image back into place. So if you start 20px from the top and left, set your position elements like so:

div {position: relative;}
img {position: absolute; top: -20px; left: -20px; clip: rect(20px, 40px, 40px, 20px);}

Crickets chirping

Where’d you go? Ok, you’re still with me? Barely? Ok, yeah, that’s not intuitive. So let’s think about it in a different way. First figure out how large you want your clipped image to be. Let’s go with 100px wide and 100px tall and isolate Beaker’s nose (8). Now just think about how far from the top and the left you want it to be. You need it to start 100px from the top and 200px from the left. With that in mind you have normal values we’re used to. Right now we’re looking at this:

img {clip: rect(100px, R, B, 200px); position: absolute;}

Since we know that we want the image to be 100 x 100, we just add 100 to the values we already have. After adding dimensions to our div to give it layout and pulling it back into position with Left and Top, we end up with:

img {position: absolute; clip: rect(100px, 300px, 200px, 200px); top: -100px; left: -200px;}
div {position: relative; width: 100%; height: 100px;}

Do you see what happened? We said we want to start 100px from the Top and end (Bottom) 200px from the Top. We said we want to start 200px from the Left and end (Right) 300px from the Left. Make sense? Maybe one more example will help.

This time we want a true rectangle that is 300px wide and 200px tall. We want to start this one 100px from the top and 100px from the left. Knowing our Top and Left values we have this:

img {clip: rect(100px, R, B, 100px); position: absolute;}

Since we want it 200px tall, we add that to our Top offset of 100px to get 300px. Now we have this:

img {clip: rect(100px, R, 300px, 100px); position: absolute;}

Since we want it 300px wide, add that to our Left offset of 100px to get 400px. Now we have this:

img {position: absolute; clip: rect(100px, 400px, 300px, 100px); top: -100px; left: -100px;}
div {position: relative; width: 100%; height: 200px;}

Browser support for it is excellent, and by that I mean IE supports it in the universal form starting with IE8. Even lower versions of IE support it, but without the commas in between numbers.

About the Author
Pete Schiebel is the lead front-end developer for the Platforms team, described by some here as the "front end MacGyver" for how he works to make sure client projects look and function as advertised. Follow him on Twitter @sneakepete.

Filed in CSS, Development

Comments are closed.