clip (CSS property)

Spec
Inherited Initial Version
No auto CSS2, 2.1
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Partial Full Full Full Full

Syntax

clip: { shape | auto | inherit } ;

Description

This property sets the clipping region for an absolutely positioned element.

Any part of an element that would render outside the clipping region will be invisible. This includes the content of the element and its children, backgrounds, borders, outlines, and even any visible scrolling mechanism.

Clipping may be further influenced by any clipping regions that are set for the element’s ancestors, and whether or not those have a visibility property whose value is something other than visible. Clipping may also occur at the edges of the browser window, or the margins of the paper (when printing).

The default clipping region is a rectangle with the same dimensions as the element’s border box.

Example

This style rule assigns a clipping region of 200×100 pixels for the element with ID "tunnel-vision". The upper left-hand corner of the clipping region is at position (50,50) with respect to the element’s box:

#tunnel-vision {
  width: 400px;
  height: 200px;
  clip: rect(50px, 250px, 150px,
  ➥    50px);
}

Value

If the value is specified as auto, no clipping will be applied.

The only shape value that’s allowed in CSS2.1 is a rectangle, which must be specified using the rect() functional notation. The function takes four comma-separated arguments—top, right, bottom, and left—in the usual TRouBLe order. Each argument is either auto or a length, and negative length values are allowed. The top and bottom positions are relative to the top border edge of the element’s box. The left and right positions are relative to the left border edge in a left-to-right environment, or to the right border edge in a right-to-left environment. When specified as auto, the position is that of the corresponding border edge.

Note that the interpretation of positions specified in the rect() functional notation changed between CSS2 and CSS2.1. In CSS2, each value specified the offset from the corresponding border edge.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Partial Partial Partial Partial Full Full Full Full Full Full Full Full Full Full Full Full Full

Internet Explorer for Windows versions up to and including 8 do not support the recommended syntax for the rect() notation. However, they do support a deprecated syntax where the arguments are separated by whitespace rather than commas.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Previous / Next page

  1. Previous
  2. Next

User-contributed notes

ID:
#5
Contributed:
by brothercake
Date:
Tue, 06 Jul 2010 11:56:50 GMT

ps. just discovered the syntax thing might be related to scripting - that comma-separation works when applied via JS.

ID:
#4
Contributed:
by brothercake
Date:
Tue, 06 Jul 2010 11:47:18 GMT

Your notes on IE support don't match my experience - afaik IE6-8 support the comma-separated notation just fine. However IE6-7 don't support the value "auto", and you have to put "rect:(auto,auto,auto,auto)" instead

Can you confirm what the situation is - maybe I've misunderstood what the footnotes mean?

Related Products