CSS clip Property

What You’ll Learn

The clip property defines a rectangular visible area for positioned elements. It hides everything outside that rectangle — useful for simple cropping effects and understanding legacy CSS.

Definition and Usage

The clip CSS property defines a visible portion of an element. It works with positioned elements, allowing you to specify a rectangular area through which the content is displayed while hiding the rest.

Although largely replaced by the clip-path property, clip is still useful for certain tasks and remains supported in modern browsers. It is best suited when you need a simple rectangular crop on an absolutely positioned element.

📝 Syntax

The clip property uses the rect() function to define the clipping rectangle:

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

Basic Example

.clipped {
  position: absolute;
  clip: rect(50px, 200px, 150px, 50px);
}

Syntax Rules

• The initial value is auto (no clipping).
• rect(top, right, bottom, left) defines edges relative to the element’s border box.
• The element must have position: absolute or position: fixed.
• Values are typically lengths (px, em) or auto for each edge.
• For complex shapes, use clip-path instead of clip.

💎 Property Values

The clip property accepts auto or a rect() function with four edge values.

Understanding rect()

The four values inside rect() define a rectangle measured from the top-left of the element’s border box:

1. top — distance from the top edge to the top of the visible region.
2. right — distance from the left edge to the right side of the visible region.
3. bottom — distance from the top edge to the bottom of the visible region.
4. left — distance from the left edge to the left side of the visible region.

Anything outside this rectangle is clipped (hidden). Wrap the element in a position: relative container when you need to control layout around the clipped content.

clip vs clip-path

Examples Gallery

Try rectangular clipping on images, text blocks, auto vs clipped comparison, and a positioned banner crop.

<style>
  .clipped {
    position: absolute;
    clip: rect(50px, 200px, 150px, 50px);
  }
</style>

<div style="position: relative;">
  <img src="photo.jpg" alt="Example" class="clipped">
</div>

<style>
  .snippet {
    position: absolute;
    width: 240px;
    clip: rect(0px, 240px, 60px, 0px);
  }
</style>

<div style="position: relative; height: 70px;">
  <p class="snippet">Long text that gets clipped...</p>
</div>

.full-view {
  position: absolute;
  clip: auto;
}

.cropped {
  position: absolute;
  clip: rect(10px, 90px, 70px, 10px);
}

<style>
  .banner-wrap { position: relative; height: 80px; }
  .banner {
    position: absolute;
    width: 320px;
    height: 120px;
    clip: rect(20px, 280px, 80px, 40px);
    background: linear-gradient(90deg, #0ea5e9, #6366f1);
  }
</style>

<div class="banner-wrap">
  <div class="banner"></div>
</div>

💡 Best Practices