CSS Clip Property

CSS Clip Property. The clip property in CSS is declared to be “which part is going to visible to the user”. This property is only suitable for absolutely positioned elements. It means element with either position: absolute or position: fixed.CSS clip property actually aims at showing what portion is required by the user. In day to day life, it is said to be “crop”. Generally, we used it for cropping any part of the image. In the market, we have so several JavaScript plugins out there to crop the element, but now we will do this cropping functionality by using CSS clip property.

Read Also: CSS Overflow Property

How Does clip Property Work in CSS?

Clip property operates only with position property as both absolute or fixed. It will nevermore work with static or relative positioning.

The clip property has 3 different values.

• clip: auto;
• clip: inherit;
• clip: shape;

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

CSS Clip Auto

This is the default value of the clip property. It determines if we did not define any value with clip property then it automatically taken it as auto.

<p class="clip">Clip values for this cyan and class Clip.</p>
<style type="text/css">
.clip {
  position:absolute;
  background-color:cyan;
  width:100px;
  clip:auto;
}</style>

CSS Clip Inherit

This inherit property is used to obtain the parent element properties to child element properties.

<p class="inherit">Clip values for this cyan and class Inherit.</p>
<style type="text/css">
.inherit {
  position:absolute;
  background-color:cyan;
  width:100px;
  clip:inherit;
}</style>

CSS Clip Shape

This is used to define the shape of the clip property. We have rect() function to crop the element in shape.

<p class="shape">Clip values for this cyan and class shape.</p>
<style type="text/css">
.shape {
  position:absolute;
  background-color:cyan;
  width:100px;
  clip:rect(0px,25px,25px,0px);
}</style>

That’s It.