Clip property in CSS

Introduction

In this blog, we will discuss the Clip property in CSS. Here we take the Same Image three times and now we apply the clip property on the image like this:

<html>
<body>
<div style="position:absolute;top:0;left:50;
clip:rect(10px, auto, auto, auto)">
<img src="1.jpg" width="70px" height="70px" />
</div>
<div style="position:absolute;top:0;left:150;
clip:rect(auto, 45px, auto, auto)">
<img src="1.jpg" width="70px" height="70px" />
</div>
<div style="position:absolute;top:0;left:250;
clip:rect( auto, auto, auto,10px)">
<img src="1.jpg" width="70px" height="70px" />
</div>
</body>
</html>

and now we look an example of circle in place of rectangle:

<html>
<body>
<div style="position:absolute;top:0;left:50;
clip:circle(10px, auto, auto, auto)">
<img src="1.jpg" width="70px" height="70px" />
</div>
</body>
</html>

The output Will be: