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

• 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

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

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

Browser Support

Desktop
4	12	1	1	7	1
Tablets / Mobile
37	18	4	X	1	X