CSS clip

The clip property is a legacy way to crop an absolutely positioned element to a rectangle. For modern layouts, prefer clip-path.

Syntax

clip: auto;
clip: rect(top, right, bottom, left);

clip only applies to absolutely positioned elements.

Legacy example

.cropped {
  position: absolute;
  clip: rect(0, 8rem, 4rem, 0);
}
Result:

Modern alternative

.cropped { clip-path: inset(0 4rem 0 0); }

clip-path is more flexible and supports shapes beyond rectangles.