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
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
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

<img src="images/sunset.jpg" alt="Sunset" class="clip">
.clip{
   position: absolute; 
   clip: rect(75px, 200px, 200px, 70px); /* Top, Right, Bottom, Left */
}

Browser Support

The following table will show you the current browser support for the CSS clip property.

Desktop
Edge Chrome Firefox Opera Safari
?????
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
??????