CSS

CSS

🎯 CSS clip Property

The clip CSS property defines which part of an absolutely positioned element is visible and which part is hidden. It allows you to display only a specific rectangular region of an element.

In simple terms, clip is used to cut out a portion of an element while hiding the rest.

🔹 Why Use clip?

  • Key Uses

  • Used for cropping elements visually.
  • Helps create simple masking effects.
  • Useful in old browser compatibility.
  • Common in icon and image cropping techniques.

🧩 clip Values

1️⃣ auto

No clipping is applied. The element is displayed fully.

CSS

div {
    clip: auto;
}

2️⃣ rect()

Clips the element into a rectangular visible area using top, right, bottom, and left values.

CSS

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

  • 📌 How rect() Works

  • Top → 10px
  • Right → 100px
  • Bottom → 80px
  • Left → 0px

3️⃣ initial

Resets the property to its default value.

CSS

div {
    clip: initial;
}

  • ⚠️ Important Note

  • clip only works on absolutely positioned elements.
  • It is deprecated in modern CSS.
  • clip-path is the modern replacement.
  • Still used for legacy browser support.

  • 🧠 Summary

  • clip controls which part of an element is visible.
  • Works only with positioned elements.
  • rect() defines the visible rectangular area.
  • clip is deprecated, clip-path is recommended.
CSS filter
CSS clip-path