CSS clip Property

The clip property defines the visible region of an image.

It does this by clipping (or cropping) the element.

This only works with position:absolute or position:fixed settings.

Note: This property has been deprecated, use clip-path instead.

Example

#

A clipped image.

<style>
  .clip-container {
    position: relative;
  }

  .clipped {
    position: absolute;
    clip: rect(0px,250px,300px,0px);
  }
</style>

<div class="clip-container">
  <img src="/img/css/the-bedroom.jpg"
       class="clipped">
</div>

Using clip

The clip property set a clipping rectangle with 4 coordinates.

It accepts these coordinates: top, right, bottom, and left.

Syntax

clip: auto | shape | initial | inherit;

Values

#

Value Description
auto Default. No clipping will be made.
shape Clips an element and only has one valid value: rect (top, right, bottom, left)
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different clip values.

<style>
  .clip-box {
    position: relative;
  }

  .clip-image {
    position: absolute;
    clip: auto;
  }
</style>

<div class="clip-box">
  <img src="/img/css/the-bedroom.jpg"
       class="clip-image">
</div>

Browser support

This table shows when clip support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
8.0 Mar 2009
Opera
7.0 Jan 2003
Safari
1.0 Jun 2003

You may also like

Guides