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](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/11/clip-offsets.jpg?x86293)
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 keywordauto
as an offset. The valueauto
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 fourauto
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](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/11/clip-example.jpg?x86293)
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.
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.
Further Reading
- CSS Visual Effects Module
- Understanding the CSS clip Property here on Codrops
- Putting CSS Clip To Work: Expanding Overlay Effect here on Codrops