CSS clip Property

CSS clip property specifies the clipping region for an absolutely positioned element.

The clip property does not work if overflow: visible.


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

Default value: auto
Applies to: Absolute Positioned elements
Inherited: No
Version: CSS2
JavaScript Syntax: object.style.clip = "rect(0px, 60px, 180px, 20px)"


Here is a syntax for the CSS clip property

clip: auto | shape | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
auto Default. The element does not clip
shape The element should be clips on valid shape. A shape value is: rect(top, right, bottom, left)
initial Sets default value of this property
inherit Inherits this property from its parent element


The example below shows to sets float property.

img {
  position: absolute;
  clip: rect(0px, 60px, 180px, 20px);

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 8+
  • Opera 7+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.