DevGuru CSS2: clip

Quick References

Features

Partners

PROPERTY: clip

clip : auto | rect(top, right, bottom, left)

Compatibility: IE4+ N6
Version: Level 2
Inherited: No

The clip property can be used when an element is too big to fit inside the containing block.

A containing block is simply an element that contains related sub-elements. A problem arises if a sub-element is too big in size to fit inside the dimensions of the containing block. By default, when an element is too large to fit in the allotted space, portions will be chopped off so that the remaining portion of the element will fit inside the containing box. The portions that are chopped off are simply not displayed.

The clip property allows you to specify what portion of the over-sized sub-element will be visible. This is referred to as clipping the sub-element.

The related overflow property allows you to specify if an over-size element is to be clipped. If the overflow property is set to the visible value, then setting the clip property should have no effect. In this case, the over-sized element is completely displayed even though it overflows the boundaries of the containing block.

auto

The auto value dictates that the browser will determine which portion of the element will be visible.

rect(top, right, bottom, left)

The rect(top, right, bottom, left) value sets the shape of the element that is to be visible as a rectangle (currently, this is the only permitted shape). The edges of the rectangle are defined with a blank space delimited list of the mandatory top, right, bottom, and left arguments which are the respective dimensional offsets from the four edges of the containing block. The offset can be either a positive or negative value, where a negative value extends beyond the containing block. Each of the top, right, bottom, and left arguments can be in any of the following seven units. Use the abbreviation.

Length	Abbrev.
centimeters	cm
ems	em
inches	in
millimeters	mm
picas	pc
pixels	px
points	pt

In this example, the containing element is the HTML img tag which is sized as a square with dimensions of 75 pixels by 75 pixels.

Code:
img.clp {
clip: rect(10px 60px 60px 10px);
height:75px;
width:75px;
position: absolute;
}
...
<img src="/images/guru.gif" height="75px" width="75px">
<br>
<img src="/images/guru.gif" class="clp">

Output: