CSS clip Property (deprecated)

❮ Previous Complete CSS Reference Next ❯

Example

Clip an image:

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

Definition and Usage

Note: The clip property is deprecated and is replaced by the clip-path property.

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".

Show demo ❯

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	Demo
auto	No clipping will be applied. This is default	Demo ❯
shape	Clips an element. The only valid value is: rect (top, right, bottom, left)	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS tutorial: CSS Positioning

HTML DOM reference: clip property