The clip Property in CSS

The clip property in CSS is used to define a rectangular region of an element that should be visible, while the rest of the element is hidden. Essentially, it "clips" the element to a specified region, making only that region visible. The clip property is often used with absolutely positioned elements.

However, it's important to note that the clip property is now considered deprecated and is typically replaced by the clip-path property, which offers more flexibility and support for non-rectangular clipping paths.

Syntax of the clip Property

The clip property uses the following syntax:

clip: rect(top, right, bottom, left);

Parameters

• top: The distance from the top edge of the element to the top edge of the clipping rectangle.
• right: The distance from the right edge of the element to the right edge of the clipping rectangle.
• bottom: The distance from the top edge of the element to the bottom edge of the clipping rectangle.
• left: The distance from the left edge of the element to the left edge of the clipping rectangle.

The clip property only works with elements that have position: absolute; or position: fixed;.

Example

<div class="clipped-box">Clipped Content</div>

.clipped-box {
  position: absolute;
  width: 200px;
  height: 150px;
  background-color: lightblue;
  clip: rect(20px, 150px, 100px, 30px);
}

Explanation

• Clipping Rectangle: In this example, the element's visible area is clipped to a rectangle defined by the rect function:

  • top: 20px from the top of the element
  • right: 150px from the left of the element
  • bottom: 100px from the top of the element
  • left: 30px from the left of the element

• The result is that only the part of the element within this rectangular area is visible, while the rest is hidden.

Replacing clip with clip-path

Since the clip property is deprecated, it's recommended to use the clip-path property instead. The clip-path property supports more complex shapes like circles, ellipses, polygons, and even paths created using SVG.

Using clip-path for the Same Effect

<div class="clipped-box">Clipped Content</div>

.clipped-box {
  position: absolute;
  width: 200px;
  height: 150px;
  background-color: lightblue;
  clip-path: inset(20px 50px 50px 30px); /* equivalent to the `clip` example */
}

Explanation of clip-path

• inset() Function: The inset() function in clip-path creates a rectangular clipping region similar to the clip: rect() function, but with more modern syntax and better browser support.
  • top: 20px from the top
  • right: 50px from the right
  • bottom: 50px from the bottom
  • left: 30px from the left