CSS Reference

CSS clip property

Clip an image

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

Note: The clip property is deprecated and will be replaced by the


clip-path

property in the future.

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

Contact US

Email:

Content:

CSS Reference