CSS clip Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The clip property in CSS is used to define a visible portion of an element. It works with positioned elements, allowing you to specify a rectangular area through which the content is displayed, hiding the rest. Although largely replaced by the clip-path property, clip is still useful for certain tasks and is supported by modern browsers.

💡 Syntax

The clip property uses the rect() function to define the clipping rectangle. The syntax is as follows:

Syntax

Copied

element {
  clip: rect(top, right, bottom, left);
}

🎛️ Default Value

The default value of the clip property is auto, which means no clipping is applied and the entire element is visible.

🏠 Property Values

Value	Description
top	The top edge of the rectangle.
right	The right edge of the rectangle.
bottom	The bottom edge of the rectangle.
left	The left edge of the rectangle.
auto	No clipping is applied, and the element is fully visible.

📄 Example

In this example, we'll clip an image to show only a portion of it.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS clip Example</title>
  <style>
    .clipped {
      position: absolute;
      clip: rect(50px, 200px, 150px, 50px);
    }
  </style>
</head>
<body>
  <h1>Image Clipped with CSS clip Property</h1>
  <div style="position: relative;">
    <img src="your-image.jpg" alt="Example Image" class="clipped">
  </div>
</body>
</html>

🖥️ Browser Compatibility

The clip property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, for more complex clipping paths, consider using the clip-path property which offers greater flexibility and control.

🎉 Conclusion

The clip property is a handy tool for defining the visible area of an element, particularly in situations where a simple rectangular clipping region is sufficient. While its use cases are more limited compared to the more versatile clip-path property, it can still be useful in certain scenarios. Experiment with different clipping regions to see how this property can be applied to your web projects.