Definition and Usage
The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.
- Initialauto
- Applies toabsolutely positioned elements
- Inheritedno
- Mediavisual
- Computed Valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwise
- Animatableyes, as a rectangle
- Canonical orderthe unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: <shape> | auto
clip: rect(1px, 10em, 3rem, 2ch)
clip: auto
clip: inherit
Values
<shape>
- A rectangular
<shape>
of the form
rect(<top>, <right>, <bottom>, <left>) /* standard syntax */
or
rect(<top> <right> <bottom> <left>) /* backwards compatible syntax */
where <top>
and <bottom>
specify offsets from the inside top border edge of the box, and <right>
, and <left>
specify offsets from the inside left border edge of the box — that is, the extent of the padding box.
<top>
, <right>
, <bottom>
, and <left>
may either have a <length>
value or auto
. If any side’s value is auto
, the element is clipped to that side’s inside border edge.
auto
- The element does not clip (default value). Note that this is distinct from
rect(auto, auto, auto, auto)
, which does clip to the inside border edges of the element.
Examples
01 |
p { border : dotted ; position : relative ; } |
03 |
position : absolute ; left : 263px ; |
04 |
clip : rect( 40px , 200px , 150px , 30px ); |
08 |
position : absolute ; left : 526px ; |
09 |
clip : rect( 40px 200px 150px 30px ); |
Compatibility
Desktop browsers
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
Basic support |
1.0 |
1.0 (1.0) |
4.0 |
7.0 |
1.0 (85)
Older versions of Safari (up to at least 5.1.7) incorrectly interpret clip: auto as clip: rect(auto, auto, auto, auto) . |
8.0
Correct comma syntax supported in this version. Version 8 and below incorrectly interpret clip: auto as clip: rect(auto, auto, auto, auto) . |
Mobile browsers
Feature |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Basic support |
NA |
NA |
NA |
NA |
NA |