clip (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Partial | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | auto |
CSS2, 2.1 |
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);
}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.
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
| IE | 5.5 | Partial |
|---|---|---|
| 6.0 | Partial | |
| 7.0 | Partial | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Internet Explorer for
Windows versions up to and including 7 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.
User-contributed notes
- ID:
- #1
- Date:
- Mon, 07 Apr 2008 03:01:44 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
Elements must have absolute positioning in order to have clip.
This is a flip between CSS 2.0 and 2.1 - in 2.0 absolutely positioned elements were the only ones that *may not* have clip, whereas in 2.1 they're the only ones that *may* have clip.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
