CSS clip Property

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:

autoNo 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.
initialSets the clip property to its default value(auto).
inheritInherits the clip property from the parent element.

General Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.clip = “rect(10px, 100px, 100px, 10px)”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment