Understanding the CSS Clip Property

Hugo Giraudel is pretty sure some of you don’t even know there is a CSS property called clip since it’s probably the less used property in the world. He will cover pretty much everything you have to know about it. The clip property aims at defining what portion of an element you want to show. You may have heard of this stuff as crop. There are a bunch of JavaScript plugins out there to crop an element, but actually you can do pretty much the same thing with the CSS clip property.

Let’s get started straight away with the syntax of the clip property which is not only a little bit weird but also probably difficult to understand at first glance. First thing you should note: the clip property only works on elements with position: absolute or position: fixed. It won’t work with relative or static positioning. The clip property accepts only three different values:

• Auto: this is the default behavior. Setting clip to auto is the same thing as not using clip at all.
• Inherit: well, it inherits the clip value from its parent.
• A shape function. Currently only rect() exists.