CSS Pocket Reference, 3rd Edition

Name

clip

Values:

rect(top, right, bottom, left) | auto | inherit

Initial value:

auto

Applies to:

Absolutely positioned elements (in CSS2, clip applied to block-level and replaced elements).

Inherited:

No.

Computed value:

For a rectangle, a set of four computed lengths representing the edges of the clipping rectangle; otherwise, as specified.

Description:

This is used to define a clipping rectangle inside of which the content of an absolutely positioned element is visible. Content outside the clipping area is treated according to the value of overflow. The clipping area can be smaller or larger than the content area of the element. In current browsers, the clipping area is defined by using the rect( ) value to define the offsets of the top, right, bottom, and left edges of the clipping areas with respect to the top left corner of the element. Thus, the value rect (5px, 10px, 40px, 5px) would place the top edge of the clipping area 5px down from the top edge of the element, the right edge of the clipping area 10px over from the left edge of the element, the bottom edge of the clipping area 40px down from the top edge of the element, and the left edge of the clipping area 5px over from the left edge of the element. Note that this behavior flatly contradicts CSS2.1, which defines the four values to define offsets from the top, right, bottom, and left sides of the element.

Examples:

div.sidebar {overflow: scroll; clip: 0 0 5em 10em;}
img.tiny {overflow: hidden; clip: 5px 5px 20px 20px;}

Supported ...