CSS clip Property (deprecated)
Example
Clip an image:
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
Try it Yourself »
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".
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 |
Related Pages
CSS tutorial: CSS Positioning
HTML DOM reference: clip property