CSS - clip Property
CSS - clip Property
CSS clip property is used to create a clipping region for an element, which defines the visible area of the element. Only the specified region will be visible and other regions will be hidden. The clip property only applies to elements with absolute or fixed positioning.
Syntax
clip: auto | shape | initial | inherit;Property Values
| Value | Description |
|---|---|
| auto | No clipping will be applied to the element. Default value. |
| shape | It clips an element. The only value possible is rect(top, right, bottom, left) . |
| initial | It sets the property to its default value. |
| inherit | It inherits the property from the parent element. |
Examples of CSS Clip Property
The following examples explain the clip property with different values.
Clip Property with Auto Value
To not clip an absolute or fixed positioned element, so that the entire element is visible, we use the auto value of the clip porperty. This is shown in the following example.
Example
Clip Property with rect() Value
To clip portion of an absolute or fixed positioned element such that only the specified region is visible and remaining region is not visible, we use the rect(top, right, bottom, left) value of the clip property. The specified value will clip the element from the top and left edges. This is shown in the following example.
Example
Clip Property with Images
The clip property can also be used with absolute or fixed positioned images. In the following example, auto and rect(top, right, bottom, left) values have been used with the image.
Example
Note:
-
The clip property is deprecated and replaced by clip-path property
-
The clip property will not work if ‘overflow: visible’
Supported Browsers
| Property | |||||
|---|---|---|---|---|---|
| clip | 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |