The clip property defines a clipping region, or the portion of an element's border box that is going to be visible during content's overflowing. This property may be applied only to absolutely positioned elements.

The clip property contains following information:

  1. value: <shape>, auto or inherit;
  2. initial: auto;
  3. applies to: absolutely positioned elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: automatic if specified as "auto"; otherwise a rectangle with four values which might be specified as "auto" or the computed length.

The value auto prevents element from clipping while the value shape defines a rectangle with four values. These values are: top, right, bottom and left. The top and bottom specify the offset from the top border edge of the box while the other two specify the offset from the left border edge of the box. The values may be expressed as a <length> with negative values permitted or "auto". The "auto" value means that the given edge of the clipping region is the same as the edge of the element's generated border box; for instance "auto" for top and left is equal as "0" and for right and bottom it refers to element's height / width plus the padding and border areas.

Content that has been clipped does not cause overflow.

In the example below there are two examples explaining how clip property works:

Clip property example

Example

CSS elements clipping example:

 

›› go to examples ››