CSS clip Property
The clip property allows a rectangle to clip a positioned element. The rectangle is specified as four coordinates: top, right, bottom, left. These values define offsets from the padding edge of the element. The rect(top, right, bottom, left) order follows a clockwise direction starting from the top. All four sides may be either a length or auto. auto is the default value.
The clip property does not work if the value of the overflow property is set to visible.
INFO
If possible, the newer clip-path property can be used instead because the clip property is obsolete and removed from the CSS specification. For modern browsers, use clip-path: inset(top right bottom left) or clip-path: rect(...) as a direct replacement.
| Initial Value | auto |
|---|---|
| Applies to | Absolutely positioned elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | object.style.clip = "rect(10px,40px,40px,10px)"; |
Syntax
Syntax of CSS clip Property
clip: auto | shape | initial | inherit;Example of the clip property:
Example of CSS clip Property with auto value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: auto;
}
</style>
</head>
<body>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com" />
</body>
</html>Result
In the following example the rectangle clips the image according to the set values.
Example of the clip property with the "rect" value:
Example of CSS clip Property with shape value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: rect(0px, 70px, 200px, 0px);
}
</style>
</head>
<body>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com logo" />
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| auto | Does not clip an element. This is default value. | Play it » |
| shape | Clips an element. The only valid value is rect(top, right, bottom, left). | Play it » |
| initial | It makes the property use its default value. | Play it » |
| inherit | It inherits the property from its parent element. |
Practice
What is the function of the 'clip' property in CSS?