CSS Attributes Index   Positioning Properties

---

Sets or retrieves which part of a positioned object is visible.

CSS	{ clip: 'auto' | 'rect ( top | right | bottom | left ) ' }
Script	object.style.clip = sClip ]

auto	Clip to expose entire object.
rect ( top right bottom left )	Top, right, bottom, and left specify length values, any of which may be replaced by auto, leaving that side not clipped.

The property is read/write with a default value of auto; this attribute is not inherited.

This property defines the shape and size of the positioned object that is visible. The position must be set to absolute. Any part of the object that is outside the clipping region is transparent. Any coordinate can be replaced by the value auto, which exposes the respective side ( meaning the side is not clipped ).

Note that the order of the values clip: rect ( 0 0 50 50 ) would render the object invisible, as it would set both the top and the right positions of the clipping region to 0. To achieve a 50-by-50 view port, the syntax should be clip: rect ( 0 50 50 0 ) .

Available on the Macintosh platform as of Internet Explorer^® 5.

The following example demonstrates the effects of applying the CSS clip attribute to the top, right, bottom, or left edge of an object.

 Show me 

The sample below uses inline event handlers to clip and restore an image in response to mouse click events.

<img id="theImg" src="imgs/sample.jpg"
   onclick="this.style.clip='rect ( auto auto 150 40 ) '"
   ondblclick="this.style.clip='rect ( auto ) '">

 Show me 

The following example is a collection of animated swipe effects using dynamic clipping methods.

 Show me 

currentStyle, DIV, runtimeStyle, style

clipBottom, clipLeft, clipRight, clipTop