CSS position clip property
CSS Position clip Property
Description
The clip property defines the area outside the invisible content area of an absolutely positioned element.
Possible Values
- auto − The clipping area is equal to the content area of the positioned element.
-
shape − A shape descriptor. As of CSS2, there is only one valid shape: rect(top right bottom left).
Applicable to
Block-level and replaced elements.
DOM Syntax
object.style.clip = rect(top right bottom left);
Example
Here is an example showing the effect of this property –
<html>
<head>
<style type = "text/css">
div {
background: url(/https://coder-cafe.com/wp-content/uploads/2025/09/images/css.gif);
clip:rect(10px, 155px, 145px, 10px);
border:2px solid black;
height:100px;
width:150px;
position:absolute;
top:inherit; left:0px;
}
</style>
</head>
<body>
<div>Example of clipping one image using the CSS clip property</div>
</body>
</html>
It will produce the following result −
