The **`clip` property** in #key# CSS: Cascade Style Sheets #key# defines some visible portion of an element. It clips the absolutely positioned element in the form of a rectangle. 

> In the future, the `clip` property is replaced by `clip-path` property.

# 
#  Syntax

---
```css
clip: auto|shape|initial|inherit;
```
---

##
## Property values

- **`auto`**: This is the default value. It is used when we don't want to add any clipping. 

- **`shape`**: It sets the properties to clip any element. The only valid value which is allowed is `rect (top, right, bottom, left)` 

- **`initial`**: This sets the value to its default value.

- **`inherit`**: This inherits property from its parent value.

# 
## Code

The following is the basic #key# HTML: HyperText Markup Language #key# & CSS code to demonstrate the use of the clip property:

<title>Example</title>

<div>
Welcome To Educative
</div>

//It is used to clip the div 
div 
{
  clip:rect(15px, 140px, 130px, 15px);      //Set the properties to clip the div
  border:5px solid rgb(47, 128, 221);  //Set the properties of border
  height:200px;    //Sets height
  width:200px;     //Sets width
  position:top left;      //Set the position of elements
  top:inherit;    
  left:0px;
}

codemirror

# 
## Explanation

In this example, we can see that we set the properties to clip the elements. We can also set the image in the background.

We can also change the properties and set them according to our choice. 

What is the CSS clip property?

Defines visible portion of an element as a rectangle, later replaced by clip-path.