CSS Clip

This CSS property specifies the visible area of an element. It applies to absolutely positioned elements (position: absolute;). It is generally used when the image is larger than its containing element.

It allows us to define a rectangle, which is specified as four coordinates for clipping an absolutely positioned element.

Syntax

Possible values

auto: It is the default value that shows the element as it is. There will be no clipping.

Example

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .auto { 
            position: absolute; 
            width: 400px; 
            height: 400px; 
			clip: auto; 			
        } 
          
    </style> 
</head> 
  
<body> 
<h2>clip: auto; property</h2>
        <img src= "jtp.png" class="auto">
</body> 
  
</html>

Test it Now

shape: It is used to clip an element. It clips the defined area of the element. Its valid value is rect(top, right, bottom, left).

Example

<html>
   <head>
      <style type = "text/css">
         div {
            background: url(jtp.png);
            clip: rect(0px, 150px, 250px, 0px);
            border:3px solid red;
            height:200px;
            width: 250px;
            position: absolute;            
         }
      </style>
   </head>

   <body>
      <div></div>
   </body>
</html>

Test it Now

Next TopicCSS clip-path

← prev next →