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.
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>
The clip property set a clipping rectangle with 4 coordinates.
It accepts these coordinates: top, right, bottom, and left.
clip: auto | shape | initial | inherit;
| 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. |
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>
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 |
