What is the CSS clip property?

The clip property in CSSCascade Style Sheets 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

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 HTMLHyperText Markup Language & CSS code to demonstrate the use of the clip property:

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.