clip

div.test { clip: auto;}
div.test1 { clip: rect(10px, 20px, 30px, 40px);}

<div style="clip: auto; position: absolute; background-color: yellow; width: 200px; height: 200px;">A 200px × 200px div element with 'position: absolute'.</div>

<div style="clip: rect(5px, 195px, 195px, 5px); position: absolute; background-color: yellow; width: 200px; height: 200px;">A 200px × 200px div element with 'position: absolute'.</div>

<div style="clip: rect(5px, 195px, 195px, 5px); position: fixed; background-color: yellow; width: 200px; height: 200px;">A 200px × 200px div element with 'position: fixed'.</div>

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

7+ ○

6 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN.

Specifies whether to clip (crop) and display a box.

The 'clip' property can only be applied to elements whose 'position' property is set to 'absolute' or 'fixed'.

The syntax for 'rect()' is 'rect(distance from top, distance from left to right edge, distance from top to bottom edge, distance from left)'. Values can be separated by ',' or a space, but the standard is ',' so it is recommended to use ','. Note that IE7 and earlier only support space as a separator.

div.test { clip: rect(10px, 20px, 30px, 40px);} /* This is the standard syntax. */
div.test1 { clip: rect(10px 20px 30px 40px);} /* Use this for IE7 and earlier. */