CSS - Clip (Obsolete) Property

CSS clipping property is used to create a clipping region for an element, which defines the visible area of the element.

The clip property only applies to elements with absolute or fixed positioning. This chapter discusses how to use clip property.

Though some browsers might still support it, this property is rarely used in modern web development. It's considered obsolete and non-standard. Instead, developers typically use theclip-path property, which provides more flexibility and control over clipping.

Following are all possible values that can be used for clip property:

auto − The element is visible by default.
<shape> − The rect(top, right, bottom, left) value for the clip property defines a rectangular clipping region. The top and bottom values refer to the distance from the top border, while the right and left values refer to the distance from the left border.

Applies to

Only absolutely positioned elements.

Syntax

clip = <rect()> | auto;

CSS clip - auto Value

CSS clip: auto property does not clip the element, so the entire element is visible. This property applies to elements which have the position:absolute or position:fixed property. It is the default value.

<html>
<head>
<style>
   .clip-auto {
      position: absolute;
      width: 200px;
      background-color: #3be028;
      padding: 10px;
      clip: auto; 
   }
</style>
</head>
<body>
   <div class="clip-auto">
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
   </div>
</body>
</html>

The following example demonstrates that the image will not be cropped, and it will be fully visible within its boundaries −

<html>
<head>
<style>
   .clip-auto-img {
      position: absolute;
      width: 150px;
      padding: 10px;
      clip: auto; 
   }
</style>
</head>
<body>
   <img src="images/tree.jpg" class="clip-auto-img"/>
</body>
</html>

CSS clip - rect() Value

You can set the clip: rect(top, right, bottom, left) property to specify a rectangular clipping region for an element. The top, right, bottom, and left values can be a length or auto. If auto, the element is clipped to the corresponding border edge.

<html>
<head>
<style>
   .clip-rect {
      position: absolute;
      width: 200px;
      background-color: #3be028;
      padding: 10px;
      clip: rect(0px, 100px, 150px, 0px); 
   }
</style>
</head>
<body>
   <div class="clip-rect">
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
   </div>
</body>
</html>

The following example demostrate how to use the rect() value to crop an image and make it visible at the top-left corner of the screen −

<html>
<head>
<style>
   .clip-rect-img {
      position: absolute;
      width: 150px;
      padding: 10px;
      clip: rect(0px, 200px, 160px, 0px);  
   }
</style>
</head>
<body>
   <img src="images/tree.jpg" class="clip-rect-img"/>
</body>
</html>

CSS Clip - Related Properties

Property	Description
clip-path	(Recommended) Defines clipping regions using various shapes and paths.

Print Page