O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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;}

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required