CSS Reference Property

clip

The clip property is used to clip out areas of an element, keeping only a portion of the element visible.

The portion of the element that is visible after the element is clipped is called the clipping region. The clipping is applied to the element’s border box area, which is initially entirely visible. Clipping an element is effectively similar to cropping it.

The clip property only works on an element that is either absolutely positioned or that is fixed. It doesn’t have any effect on an element that is relatively or statically positioned.

Using clip, you can specify offsets inwards that specify the areas from the edges of the element that are to be clipped out.

The clip property only accepts one shape function, namely the rect() function, as a value. The rect() function takes four parameters which are offsets from the top and left borders of the element inwards.

clip: rect(<top>, <right>, <bottom>, <left>);

Both the top and the bottom values define the offsets from the top border, and both the left and the right values define the offsets from the left border.

clip-offsets — Image showing the offsets of the clip property.

The clipping region, or the portion of the element that remains visible after the element is clipped, is defined by the offsets of the rect() function as shown in the image above. For more examples and explanation, see the Values and Examples section below.

An element’s clipping region clips out any aspect of the element (e.g., content, children, background, borders, text decoration, outline and visible scrolling mechanism — if any) that is outside the clipping region. Content that has been clipped does not cause overflow.

Trivia & Notes

In CSS 2.1, all clipping regions are rectangular, using the rect(). The specification anticipates future extensions to permit non-rectangular clipping, and may also reintroduce a syntax for offsetting shapes from each edge instead of offsetting from a point.

However, in CSS3, the clip-path property has been introduced as part of the CSS Masking Module, and the clip property has been deprecated in favor of the clip-path property. User agents are still required to support the clip property, according to the spec, so you should be able to use the clip property.

The clip-path property allows you to clip an element using different shape functions, and is thus a lot more flexible than clip. See the clip-path property entry for more information.

Official Syntax

Syntax:

clip: auto | rect() | inherit;

where

rect() = rect(<top>, <right>, <bottom>, <left>), and <top>, <right>, <bottom>, <left> are all <length> values (But see values section below for more information)

Initial: auto
Applies To: absolutely positioned elements
Animatable: yes; the offsets of the rect() function accept <length> values and are thus animatable as a length

Values

auto

The element is not clipped.

inherit

The element inherits its clip value from its parent.

rect()

Specifies a rectangular clipping region. That is, it specifies the area of the element which will be visible after the element is clipped.

The rect() function takes four parameters. These parameters can be comma-separated or space-separated.

rect(<top>, <right>, <bottom>, <left>)   /* standard syntax */

/* OR */

rect(<top> <right> <bottom> <left>)      /* backwards compatible syntax */

The comma-separated syntax is the standard syntax. However, user agents must support separation with commas, but may also support separation without commas (but not a combination), because a previous revision of the CSS specification was ambiguous in this respect. The space-separated syntax is backwards compatible.

The top, right, bottom, and left arguments are offsets defining the clipping region. All four are <length> values (Note: they cannot be a <percentage>). The top and the bottom values both define the offsets from the top border, and both the left and the right values define the offsets from the left border.

The rect() function also accepts the keyword auto as an offset. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s border box (i.e., auto means the same as ‘0’ for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box).

The top, right, bottom, and left offset parameters of rect() also accept negative length values.

Examples

The following example will keep the portion of the element between “40px” and “150px” vertically and between “80px” and “260px” horizontally.

img {
    clip: rect(275px, 575px, 425px, 365px);
}

The following image is the visual representation of the offsets defining the clipping region:

clip-example — Image showing the offsets defining the clipping region of the example.

Internet Explorer 4 to 7 support the older space-separated syntax, so in order to make sure your clipping works in those browsers, you can provide the old syntax right before the new one in the element’s rule set:

img {
    clip: rect(40px 260px 150px 80px); /* IE 4 to 7 */
    clip: rect(40px, 260px, 150px, 80px); /* IE8+ and other browsers */
}

Live Demo

In the following demo, four images are placed on top of each other by positioning them absolutely inside their container. Using CSS transitions, each image will expand its clipping region once hovered, by applying the transition to the clip property.

View this demo on the Codrops Playground

Browser Support

The clip property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Internet Explorer versions 7 back to 4 support the old space-separated rect() syntax. The standard comma-separated syntax is supported starting from IE8.