CSS clip property

Definition and Usage

clip Property Clipping Absolutely Positioned Elements

What happens when the size of an image is larger than the element that contains it? The 'clip' property allows you to specify the visible size of an element, so that the element is clipped and displayed in this shape.

Description

This property is used to define a clipping rectangle. For an absolutely positioned element, only the content within this rectangle is visible. Content outside of this clipping area is handled according to the value of overflow. The clipping area may be larger or smaller than the content area of the element.

See Also:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual:clip Property

Example

Clipping Images:

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

Try It Yourself

CSS Syntax

clip: auto|shape|initial|inherit;

Attribute Value

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

Technical Details

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

More Examples

Set the shape of an element
This example demonstrates how to set the shape of an element. This element is clipped into the shape and then displayed.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 7.0