CSS clip Property


Example

Clip an image:

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

Try it yourself »

Definition and Usage

What happens if an image is larger than its containing element? - The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped.

Note: The clip property does not work if "overflow:visible".

Default value: auto
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS2
JavaScript syntax: object.style.clip="rect(0px,50px,50px,0px)" Try it


Browser Support

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

Property
clip 1.0 8.0 1.0 1.0 7.0


CSS Syntax

clip: auto|shape|initial|inherit;

Property Values

Value Description Play it
auto No clipping will be applied. This is default Play it »
shape Clips an element. The only valid value is: rect (top, right, bottom, left) Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit


Related Pages

CSS tutorial: CSS Positioning

HTML DOM reference: clip property



Color Picker

colorpicker