Name

clip

Values:

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

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, same as declared value

Description:

Defines 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, the latter being accomplished with negative length values.

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 10 pixels to the right of the left edge of the element, the bottom edge of the clipping area 40 pixels down from the top edge of the element, and the left edge of the clipping area 5 pixels to the right of the left edge of the element.

Examples:

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

Get CSS Pocket Reference, 4th Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.