clip

Support Key: [CSS2|CSS2.1] [IE4|N4|O7|S1]
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">
Official Docs:
CSS2: Sect. 11.1.2, CSS2.1: Sect 11.1.2
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 mean, as they confused me for a long time!

Allowed Values
inherit
[CSS2|CSS2.1] [N7|O7|S1]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
auto
[CSS2|CSS2.1] [IE4|N6|O7|S1]
Type: Explicit
Description:
The clipping region is the same size as the element's rendering box.
[shape]
[CSS2|CSS2.1] [IE4|N4|O7|S1]
Type: Explicit
Description:
Only one [shape] syntax is currently understood:
     rect([top], [right], [bottom], [left])
This syntax defines a rectangular area where [top] and [bottom] specify offsets from the rendering box's top border edge. [left] and [right] specify offsets from the rendering box's left border edge (in RtL text, the [left] and [right] should be offsets from the box's right border edge).

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.

Values may be space- or comma-separated, although comma-separation is the preferred method. Currently, only a "rect" shape type is defined, but in the future other clipping shapes may be allowed.
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....