clip

With the clip property, you can crop an element, leaving only part of it visible. This will work if the position property is set to absolute or fixed.

Let's take a picture of a cute house and use the clip property to crop part of the image:

        
          
          img {  position: absolute;  clip: rect(40px, 190px, 180px, auto);}
          img {
  position: absolute;
  clip: rect(40px, 190px, 180px, auto);
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Imagine that you have a photograph, and you need to trim the excess edges with scissors. Just like in real life, you first need to mark the cut lines. The values of our property are those lines. In fact, the clip property doesn't actually cut anything, of course, but it looks very similar.

By default, all elements are fully visible because the clip property is set to auto.

If you need to change the visible area of an element, simply set the clip to the desired value. The property works only for elements with absolute or fixed positioning.

During framing, the size of the element does not change; it remains the same as before applying the clip property; only the visible area changes.

At the moment, the only available shape for the area is a rectangle. It is defined using the rect(top, right, bottom, left) function, where top and bottom specify the offset from the top edge of the element, and right and left from the left.

You can use the keyword auto as a value — the edges of the element match the edges of the visible area, or the rect() function.

In the rect() function, all standard units of measurement are allowed, and it's required to specify all four values.

This demo will help you better understand how the property works:

💡 The property is not inherited.

💡 The default value is auto.

💡 It can be animated, read more about CSS animations.

💡 It works only for elements with absolute or fixed positioning.

        
          
          .element {  position: absolute;  clip: rect(0, 0, 0, 0);}
          .element {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

        
        
          
            
            Copy
            Copied
            Failed to copy