CSS clip Property

CSS clip Property

The clip property in CSS defines a rectangular clipping region for absolutely positioned elements. Anything outside this region is hidden.

🚨 Note: The clip property is deprecated in favor of clip-path. It only works on elements with position: absolute or position: fixed.

1. Syntax

selector {
  position: absolute;
  clip: rect(top, right, bottom, left);
}

Value	Description
auto	No clipping (default).
rect(top, right, bottom, left)	Defines the visible rectangular area.

✅ Units: Values can be in px, em, %, etc.
✅ clip only applies to block elements, not inline elements.

2. Example – Clipping an Image

img {
  position: absolute;
  clip: rect(10px, 100px, 100px, 10px);
}

✅ This keeps only part of the image visible.

3. Example – Clipping a Div

div {
  position: absolute;
  width: 200px;
  height: 200px;
  background: red;
  clip: rect(20px, 150px, 150px, 20px);
}

✅ The outer edges are hidden, leaving a visible rectangular section.

4. Alternative – Using clip-path Instead

Since clip is deprecated, it's better to use clip-path:

img {
  clip-path: inset(10px 20px 30px 40px);
}

✅ Works the same way but with better browser support.

5. Best Practices

✔ Use clip-path instead of clip for modern web design.
✔ Always set position: absolute or fixed for clip to work.
✔ Test on different browsers, as clip has limited support.