Easy Tutorial
❮ Sel Element Pr Text Color ❯

CSS clip Property

Example

Clip an image:


Property Definition and Usage

What happens if an image is larger than the element that contains it? The clip property allows you to specify an absolutely positioned element that should be visible, cropping the element to that shape and displaying it.

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

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

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
clip 1.0 8.0 1.0 1.0 7.0

Property Values

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

Related Articles

CSS Tutorial: CSS Positioning

❮ Sel Element Pr Text Color ❯