Content Clipping

Clipping

The CSS clip property creates a rectangular window that reveals part of an element.

Syntax

clip: rect(top, right, bottom, left) | auto | inherit

initial value:	auto
applies to:	absolutely positioned elements
inherited:	no
computed value:	For a rectangle, a set of four computed lengths representing the edges of the clipping rectangle; otherwise, as specified.

You cannot have a space between rect and the opening parens.
You must use absolute units for rect values. Relative values are not valid.

The clip property only has an effect on absolutely positioned elements.

The clip property can be used in conjunction with the OVERFLOW property to further control the width and height of the viewed content within the confinement area of the overflowed element. This allows the designer to add visual space between the edges of the confinement area of overflowed element and the viewable content.

The clip property can also be used with JavaScript to animate an image. For example, the clipped area can initially be set so that an image is not visible, and gradually expand until the image is fully displayed.

rect

The rect values specify the sides of the rectangular clipping area.

Unlike padding and margin, the rect values specify offsets from the upper-left corner of the element's visible area.

The reference point for the top and left offsets are the outer-edges of the top and left border.

rect values can be negative, or auto.
- Negative values expand the clipping area outside the element's box.
- When auto is specified for a side, it locates the specified edge at the corresponding edge of the content area. In other words, there is no clipping on that specific side.
  - Using the auto value is a quick way to specify no clipping on the right and bottom of the element.

auto

The default value, auto, locates the edges of the clipping rectangle on all four corresponding edges of the element box; it simply displays the element contents without any clipping.

Examples

The first example shows an image before clipping, and after clipping. Below are the style sheet and the markup for this example:

Style sheet

kazul-small.jpg image dimensions:

#.kazul {
  width: 295px; height: 176px;
  }

Set positioning context and highlight the outer edges of the clipped element:

.elementEdges {
  width: 295px; height: 176px;
  position: relative;
  border: 1px dashed red;
  }

CLIP must be applied to an absolutely positioned element;
clip 25px on all sides:

.clip {
  position: absolute;
  clip: rect(25px 270px 151px 25px)
  }

Markup

<h4>Before Clip</h4>
 
<div class="elementEdges">
  <div class="kazul">
    <img src="images/kazul-small.jpg" alt="lounging kitty"
         width="295" height="176" />
  </div>
</div>
 
<h4>After Clip</h4>
 
<p>clip: rect( ... )</p>
 
<div class="elementEdges">
  <div class="kazul clip">
    <img src="images/kazul-small.jpg" alt="lounging kitty"
         width="295" height="176" />
  </div>
</div>

This is the rendered result.

Before Clip

After Clip

clip: rect(25px 270px 151px 25px)

The size of the element has not changed, but the element has been clipped on all sides, so that 25 pixels on all sides are no longer visible.

In the next example, we will add padding, borders and margin to demonstrate the precise reference point of the CLIP offsets. We will use the same image, but add 10 pixel padding, borders and margin to all sides. I will clip 10 pixels from the top and left of the element, but use the auto value to leave the left and bottom sides unclipped.

Below is the style sheet this example. The markup is identical to first example:

Style sheet

Border is green; background color makes the padding appear teal:

.kazul {
  width: 295px; height: 176px;
  padding: 10px;
  border:  10px solid #690;
  margin:  10px;
  background-color: #699;
  }

Set container width and height to account for nested element's
margins, padding, and border:

.elementEdges {
  width: 355px; height: 236px;
  position: relative;
  border: 1px dashed red;
  }

Clip the border off top and left, leave the right and bottom border:

.clip {
  position: absolute;
  clip: rect(10px auto auto 10px)
  }

Before Clip

After Clip

clip: rect(10px auto auto 10px)

As you can see, clipping 10 pixels from the top and left of the element cropped out the 10 pixel-wide border. From this, you can see that the reference point of the clipping rectangle is the top-left outside corner of the border (the visible box), not the outer top-left corner of the element box, since the margin was not used as the reference point.

Also, you can see that using AUTO for the right and bottom values leaves the right and bottom sides unclipped.

Resources

Example of the clip property in action, iBloom Studios
Clipping , CSS: The Definitive Guide, 1st Edition, Eric Meyer
Clipping , W3C CSS 2.1 Specification

Manipulating Visibility