Understanding the CSS Clip Property

I’m pretty sure some of you may be not aware of CSS clip property. since it’s probably the less used property in the world. It’s no big deal guys. I can't wait, get this show on the road🎉.


clip property define crop the portion of an element you want to show. Exactly like, "crop" an image by a single CSS property without ask help to JS plugins. It's really surprising.

Probably, css clip property having some limitation. It's only working on position: absolute; or position: fixed; . It won’t work with relative or static positioning.

Though we can play around with clip property. start to learn clip property from syntax.

.element {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

Syntax seems little bit weird. Chill, it's still interesting. Just go through following code,

clip: rect(<top>, <right>, <bottom>, <left>);

Your guessing is right🥳. Above syntax seems similar to margin or padding shortcut. But, There is a difference in taking of value.

Now pay attention. Both the top and the bottom values define the offset from the top border and the left and right values define the offset from the left border.

I find best illustration for how clip property take values from above image. It definitely make sense to you. Hey still with me, I will show you an codepen demo(specially for your patience😍).

Congratulations🎉🎉, you reached the climax of this blog and Please execuse me, I ended up with one more bonus info.

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.

Remember avoid usage of % in clip path, It's not working. Need to handle consciously.

Hope, Now you get familire with clip property. Hey Ninja🐱‍👤🐱‍👤, Thanks for reading!!. If you love it or you play around with clip property in experimentally, comment below.