CSS clipProperty


Example

Crop an image:

img { position:absolute; clip:rect(0px,60px,200px,0px); }

Try it Yourself »

Attribute definition and usage instructions

What happens if an image is larger than the element that contains it? - The clip property lets you specify an absolutely positioned element, what size should be visible, and the element is clipped into this shape and displayed.

Note:If "overflow: visible" is set first, the clip property does not take effect.

Default Value: auto
Inherited: no
version: CSS2
JavaScript Syntax: object.style.clip="rect(0px,50px,50px,0px)"


Browser Support

The numbers in the table specify the first browser version number that supports this property.

Property
clip 1.0 8.0 1.0 1.0 7.0

Property value

Value Description
shape Sets the shape of an element. The only legal shape value is: rect (top, right, bottom, left)
auto Default value. No clipping is applied.
inherit Specifies that the value of the clip property should be inherited from the parent element.


Related Articles

CSS Tutorial:CSS Positioning

other extensions