CSS clip Property

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

The clip property does not work if overflow: visible.

Usages

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

Syntax

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

Examples

The example below shows to sets float property.

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

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.