clip

Support Key: [CSS2] [IE4|N4|O7]
 Other Positioning Properties
top
right
bottom
left
vertical-align
 overflow
overflow-x
overflow-y
text-overflow
z-index
= Index DOT Css by Brian Wilson =
  Main Index | Property Index | CSS Support History | Browser History  


   Quick Statistics   
Default Value:
auto
Applicable Elements:
Block and Replaced elements
Inherit From Parent:
No
Applicable Media:
Visual
HTML Equivalent:
<layer CLIP="left,top,right,bottom">
What is it?
A clipping area describes the portions of an element's rendering box that are visible (when an element's 'overflow' property is not set to 'visible'.)

Parent element clipping regions also apply to calculating a current element's clipping area; in cases where multiple clipping regions apply to an element, only the intersection of the multiple regions should be displayed. Be sure to take careful note of the syntax, source origin and what the measurements, as they confused me for a long time!

Allowed Values
inherit
[CSS2] [N7|O7]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
auto
[CSS2] [IE4|N6|O7]
Type: Explicit
Description:
The clipping region is the same size as the element's rendering box.
[shape]
[CSS2] [IE4|N4|O7]
Type: Explicit
Description:
Only one [shape] syntax is currently understood:
     rect([top] [right] [bottom] [left])
This syntax defines a rectangular area where [top], [right], [bottom], and [left] are offsets from each respective side of the element's rendering box. In the future, other clipping shapes may be allowed.

The [top], [right], [bottom], and [left] values can take a standard [length] unit measurement or 'auto'. Use of the keyword 'auto' in this case indicates that the clipping region for a specific edge will be the same as the corresponding side of the element's normal rendering box.

The origin point of the measuring system for this property is top/left, with increasing values as you move toward the bottom/right edges for each axis. Right and bottom values are measured relative to the origin point.
Example
Ext/Doc: p { overflow: scroll; position: absolute;
width: 50px; height: 50px; clip: rect(5px 40px 40px 5px) }
In-Line:  <p STYLE="overflow: scroll; position: absolute;
width: 50px; height: 50px; clip: rect(5px 40px 40px 5px)">text
content that will be clipped in a prescribed manner</p>
Notes Browser Peculiarities

Boring Copyright Stuff....