Elements which are not part of the document flow, which are absolutely positioned and attributed with an overflow
other than the default visible
, can be ‘clipped’ to show only part of their content and leave the rest of the element transparent, allowing any content underneath to show through. Currently only rectangular shapes are possible, but future versions of the CSS standard and future browsers are expected to support other shapes too. Until then, circles and the like can be realized by overlaying an image with a transparent area. The clip
property is not supported in Netscape 4.
The rectangle is specified by the word rect
, followed by brackets inside which four values are separated by spaces, or, comma's, no spaces, no comma's, no sp... The browser manufacturers and specification authors seem not to agree on this point, even amongst themselves. The values represent the distances to the top, right, bottom and left sides of the rectangle, as measured from the top left corner of the element. Each value is a combination of a number (which may include the dot to denote a decimal fraction) and a unit, %
for relative, em
, in
, cm
, mm
, pt
and px
for other measures. There should be no space between the number and its unit.
A special value is auto
, meaning no clipping takes place on that side. If all four sides are auto, it is sufficient to state it only once.
Another special one is inherit
, which suggests the clip style of the parent element is followed, but support for it is poor with only Netscape 6 and Opera 4 honouring the value.
Like any other style property, the clip can be applied inline, as part of an element's style
attribute...
<p style="clip: rect( auto 0.5in auto 2cm );">Hello world!</p>
... or in a stylesheet, cascading along with the other properties...
#someId { clip: rect( auto 50% 25% auto ); } .aClass { clip: rect( inherit ); }
... or even in script:
document.getElementById( 'someID' ).style.clip = 'rect( auto 4em 2.1em auto )';
The value is then to be supplied as a single string. Sides cannot be manipulated individually in the major browsers.
Just don't forget the clip property depends on other style properties, position
and overflow
, to be able to have any effect.
The theory sounds solid, but deviations are possible. The wording in the specification is not entirely clear, but is generally understood to measure each value from its own side, e.g. the value for the amount of clipping on the bottomside should be the distance from the bottom edge of the object to the bottom edge of the clipped area. All browsers that support clips, deviate from this, and measure all values from the top left. The amount of clipping on the bottomside should then be given as the distance from the top to the clipped edge at the bottom. The difference may be subtle, the results are not.
The enduring photo of an ambitious and frustrated James Dean walking a rainy Times Square, NY, has been reproduced here several times, each with a different clip setting. For an interactive test, try the clip demonstration in our Javascript section.
Despite the sheer number of clipped rectangles in this sample collection, as should be evident, other arrangements are still possible.