Expand All | Collapse All

CSS clip Property

Topic: CSS3 Properties ReferencePrev|Next


The clip CSS property defines the clipping region for an absolutely positioned element. However, it does not work if the overflow property is set to visible.

The following table summarizes the usages context and the version history of this property.

Default value: auto
Applies to: Absolutely positioned elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: CSS 2, 3

Warning: Do not use this property as it has been deprecated since CSS3 and removed from the future version. Though some browsers may still support it.


The syntax of the property is given with:

clip shape | auto | initial | inherit

The example below shows the clip property in action.

img {
    position: absolute;
    clip: rect(0px,50px,200px,10px);

Property Values

The following table describes the values of this property.

Value Description

Clips an element. The only valid shape value is: rect(top, right, bottom, left). Where top and bottom specify offsets from the top border edge of the box, and right and left specify offsets from the left border edge of the box.

The top, right, bottom, and left may either have a length value or auto. Negative lengths are permitted.

auto The element does not clip. This is default value.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element clip property.

Browser Compatibility

The clip property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 7+

Further Reading

See tutorial on: CSS Position, CSS Overflow, CSS Display.

Related properties: position, display, overflow, overflow-x, overflow-y.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties