CSS clip Property

Description

The clip property determines the area of the positioned element in which its contents will be displayed. Everything that does not fit in this area will be cut off and become invisible.
The clip property has been deprecated please use clip-path property instead.

The clip property has been deprecated or is no longer in any CSS working groups.

Initial value: auto
Applies to: Absolutely positioned elements
Inherited: No
Media: Visual
Computed value: 'auto' if specified as 'auto', otherwise a rectangle with four values, each of which is 'auto' if specified as 'auto' and the computed length otherwise
Animatable: Yes
CSS Version: CSS2, CSS3
JavaScript syntax: object.style.clip

Syntax

clip: auto | <shape>

Values

<shape> = rect(<top>, <right>, <bottom>, <left>)

autoThe element does not clip.
<shape>Each of the arguments <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box. Authors should separate offset values with commas. <top>, <right>,<bottom>, and <left> may either have a <length> value or 'auto'. Negative lengths are permitted.
inherit

Example

HTML

<img src="images/sunset.jpg" alt="Sunset" class="clip">

CSS

.clip{
   position: absolute; 
   clip: rect(75px, 200px, 200px, 70px); /* Top, Right, Bottom, Left */
}

Result

Browser Support

Desktop

4	12	1	1	7	1

Tablets / Mobile

37	18	4	14	1	1.0

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu