CSS Properties Index   Positioning Properties

---

Sets or retrieves a visible portion of an element.

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

auto	Default. Exposes the entire object.
rect ( top right bottom left )	The top and bottom values are offsets from the inside top border edge of the box, while right and left are offsets from the inside left border edge of the box.

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 element’s 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 ) .

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