The cover of The Complete Idiot's Guide to Create a Web Page The Complete Idiot's Style Sheets Reference

| Index | Current Category: Dimensions |
| Previous Style: clear | Next Style: color |


clip

Specifies how much of an element's box is visible. (This is called the clipping region.)

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later 4.0 and later
Notes:
  • This property only applies when the overflow property is set to auto, hidden, or scroll.
  • In Internet Explorer, you must set the position style to absolute.
  • In Netscape, this property only applies to layers.

See Also:

height, overflow, overflow-x, overflow-y, position, width

Possible Values:

auto
The clipping region is the same size as the element's box.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later Not supported

rect
Specifies a rectangular clipping region.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later 4.0 and later

Notes:
  • The format to use for this value is rect(top right bottom left), where the following items specify each side of the clipping region:
    top The position of the top side of the clipping region. The value is the number of pixels from the top of the element's box.
    right The position of the right side of the clipping region. The value is the number of pixels from the right side of the element's box.
    bottom The position of the bottom side of the clipping region. The value is the number of pixels from the bottom of the element's box.
    left The position of the left side of the clipping region. The value is the number of pixels from the left side of the element's box.

Example:
<IMG SRC="venus.jpg" 
     WIDTH=246
     HEIGHT=322
     STYLE="position: absolute;
            top: 65;
            left: 10">
<IMG SRC="venus.jpg" 
     WIDTH=246
     HEIGHT=322
     STYLE="position: absolute;
            top: 65;
            left: 266;
            overflow: auto;
            clip: rect(100 185 180 75)">
How It Looks:
Head for clipex.htm to see this example in action.

| Index | Current Category: Dimensions |
| Previous Style: clear | Next Style: color |