CSS Basic

CSS HOME
CSS Introduction
CSS Syntax
CSS How To
CSS Background
CSS Text
CSS Font
CSS Box Model
CSS Border
CSS Outline
CSS Margin
CSS Padding
CSS List
CSS Table

CSS Advanced

CSS Dimension
CSS Classification
CSS Positioning
CSS Pseudo-class
CSS Pseudo-element
CSS Image Gallery
CSS Image Opacity
CSS Media Types
CSS Don't
CSS Summary

CSS Examples

CSS References

CSS Reference
CSS Ref Alphabetical
CSS Ref Aural
CSS Units
CSS Colors
CSS Colorvalues
CSS Colornames

CSS Quiz

CSS Quiz
CSS Exam

CSS clip Property

Complete CSS Reference

Example

Clip an image:

img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

Definition and Usage

What happens if an image is larger than its containing element? - The clip property lets you specify the dimensions of an absolutely positioned element that should be visible, and the element is clipped into this shape, and displayed.

Note: The clip property does not work if "overflow:visible".

Default value:	auto
Inherited:	no
Version:	CSS2
JavaScript syntax:	object.style.clip="rect(0px,50px,50px,0px)"

Browser Support

The clip property is supported in all major browsers.

Note: Internet Explorer does not support the property value "inherit".

Property Values

Value	Description
shape	Clips an element. The only valid value is: rect (top, right, bottom, left)
auto	No clipping will be applied. This is default
inherit	Specifies that the value of the clip property should be inherited from the parent element

CSS tutorial: CSS Positioning

HTML DOM reference: clip property