✂️ CSS clip: Clipping Elements to a Rectangle

The CSS clip property was originally used to define the visible area of an absolutely positioned element. It lets you show only a rectangular portion of the element while hiding the rest — kind of like cropping a photo. Although it’s now considered deprecated, it’s still helpful to understand for legacy code or certain low-level effects.

---

🧾 What is clip?

The clip property allows you to define a rectangular region to display part of an element. Any content outside that region is hidden.

📌 Important: clip only works on elements with position: absolute or position: fixed.

---

🧬 Syntax

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

Value Breakdown:

• rect() is a function that defines a rectangle.
• Units are typically in pixels, but other units like em can be used.
• The rectangle is defined relative to the top-left corner of the element.

clip: rect(0px, 100px, 100px, 0px);

This would show only a 100×100 pixel square from the top-left of the element.

---

🎯 Examples

1. Clipping a box

.clipped-box {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px, 100px, 100px, 0px);
  background: url('image.jpg') no-repeat;
}

Only the top-left 100×100px portion of the image will be visible.

---

2. Hiding half of an element

.half-hidden {
  position: absolute;
  clip: rect(0, 200px, 100px, 100px);
}

Only the right half (from 100px to 200px) of the top 100px will be shown.

---

⚠️ Deprecation Warning

The clip property is deprecated in favor of the more powerful clip-path property, which allows for non-rectangular shapes (circles, polygons, etc.).

Instead of:

clip: rect(0, 100px, 100px, 0);

You should now use:

clip-path: inset(0px 100px 100px 0px);

The clip-path property works with SVG paths and supports animations, making it more versatile and modern.

---

🛠️ Tips & Use Cases

• Use clip in legacy projects or where strict browser compatibility is needed.
• Use clip-path for new designs involving creative visual effects.
• Always pair clip with position: absolute or fixed — otherwise, it won’t work.

---

✅ Browser Support

Browser	clip Support	clip-path Support
Chrome	✅	✅ (full)
Firefox	✅	✅ (full)
Safari	✅	✅ (partial for SVG early, full for CSS)
Edge	✅	✅
Internet Explorer	✅	❌ (no clip-path)

---

🔚 Conclusion

The CSS clip property lets you crop elements to a rectangle — useful for hiding parts of elements or creating legacy visual effects. However, since it’s deprecated, it’s best to use clip-path in modern CSS for more flexibility and future-proof design.

---