CSS clip Property

Definition and Usage

The clip property shows only a rectangle of an element and hides the rest. It works only on elements with position: absolute or fixed.

You set the rectangle with the old rect(top, right, bottom, left) form. For new projects, prefer clip-path.

CSS Syntax

The initial value is auto. In rect(), top and bottom are offsets from the top border edge; right and left are offsets from the left border edge.

Property Values

How to Use clip

Position first, then clip. Order matters for the property to apply.

1. Give the element position: absolute or fixed (and a sized containing block if needed).
2. Set width and height so you know the box size in pixels.
3. Add clip: rect(top, right, bottom, left) with comma-separated lengths.
4. For new designs, switch to clip-path or overflow: hidden when a simple crop is enough.

Live Preview

The blue box is position: absolute. Change only clip. The dashed frame shows the full box size.

CSS Examples

Each snippet focuses on clip. Position is required so the clip can apply. Use Try It Yourself for a live editor.

<style>
  .stage { position: relative; width: 192px; height: 128px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    top: 0; left: 0;
    width: 192px; height: 128px;
    background: #2563eb;
    color: #fff;
    clip: auto;
  }
</style>

<div class="stage">
  <div class="box">Full box</div>
</div>

<style>
  .stage { position: relative; width: 192px; height: 128px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    top: 0; left: 0;
    width: 192px; height: 128px;
    background: #2563eb;
    color: #fff;
    clip: rect(0, 96px, 64px, 0);
  }
</style>

<div class="stage">
  <div class="box">Top-left</div>
</div>

<style>
  .stage { position: relative; width: 192px; height: 128px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    top: 0; left: 0;
    width: 192px; height: 128px;
    background: #2563eb;
    color: #fff;
    clip: rect(32px, 160px, 96px, 32px);
  }
</style>

<div class="stage">
  <div class="box">Middle</div>
</div>

Key Takeaways