CSS clip property is used to clip off a portion from an element. The clip property works only with the ‘absolute’ or ‘fixed’ positioned elements.
The dimensions of the clipped portion are specified using the rect(top, right, bottom, left) function. which takes four parameters top, right, bottom, and left. These parameters can be specified in any valid CSS length format like ‘px’, ’em’, ‘rem’, etc. Refer to the below image:
Example:
img{
position: absolute;
clip: rect(25px, 100px, 100px, 25px);
}
Note: The clip property only works with the elements having position: absolute; or position: fixed;.
CSS Syntax
The clip property has the following syntax:
clip: auto|rect()|initial|inherit;
Property Values
The clip property accepts the following values:
| auto | No clipping is applied. This is the default value. |
| rect(top,right,bottom,left) | Defines the dimensions of the clipped portion. The dimension(parameters) can accept any valid CSS length formats like ‘px’, ’em’, ‘rem’, etc. |
| initial | Sets the clip property to its default value(auto). |
| inherit | Inherits the clip property from the parent element. |
General Info
| Default Value | auto |
| Inherited | No |
| JavaScript Usage | element.style.clip = “rect(10px, 100px, 100px, 10px)” |
