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
<!DOCTYPE html><html><head><style>.sample { width: 200px; background-color: lightblue; padding: 10px; }</style></head><body><h2> CSS clip property </h2><p>.clip-rect { position: absolute; width: 200px; background-color: lightblue; padding: 10px; clip: auto; }</p><div class="sample">Original text:</div><br/><p>TutorialsPoint is an educational platform offering a vast array of tutorials and resources across various subjects, including programming, web development, and technology. It aims to provide accessible and comprehensive learning materials for learners of all levels globally.</p><div class="clip-rect">Clip: auto value</div><br/></body></html>TutorialsPoint is an educational platform offering a vast array of tutorials and resources across various subjects, including programming, web development, and technology. It aims to provide accessible and comprehensive learning materials for learners of all levels globally.
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
<!DOCTYPE html><html><head><style>.sample { width: 200px; background-color: lightgreen; padding: 10px; }</style></head><body><h2>.clip-rect { position: absolute; width: 200px; background-color: lightgreen; padding: 10px; clip: rect(0px 170px 140px 0px); }</h2><p>CSS clip property</p><div class="sample">Original text:</div><br/><p>TutorialsPoint is an educational platform offering a vast array of tutorials and resources across various subjects, including programming, web development, and technology. It aims to provide accessible and comprehensive learning materials for learners of all levels globally.</p><div class="clip-rect">Clip: rect(0px 170px 140px 0px) value</div><br/></body></html>TutorialsPoint is an educational platform offering a vast array of tutorials and resources across various subjects, including programming, web development, and technology. It aims to provide accessible and comprehensive learning materials for learners of all levels globally.
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
<!DOCTYPE html><html><head><style>img { width: 300px; height: 200px; }.clip-auto { position: absolute; clip: auto; }</style></head><body><h2>.clip-rect { position: absolute; clip: rect(0px 140px 170px 0px); }/><p>CSS clip property</h2><p>Original image:</p><img src="/css/images/white-flower.jpg"</p><img src="/css/images/white-flower.jpg" /><p>clip: auto value</p><img src="/css/images/white-flower.jpg" class="clip-rect" /></body></html>clip: rect(0px 140px 170px 0px) value
Note:
- The clip property is deprecated and replaced by clip-path property
- The clip property will not work if ‘overflow: visible’
Leave a Reply