CSS property clip (clipped region) defines what portion of an element’s border box is visible. The clip property applies only to absolutely positioned (position=absolute, fixed) elements.
CSS property clip
| CSS version: | CSS 2.1 |
| Value: | rect(top, right, bottom, left) | auto | inherit |
| Initial: | auto |
| Applies to: | absolutely positioned elements |
| Inherited: | no |
Example – css clip
Original image size (150×100).
In the following code, CSS property clip can be changed to the following values
- rect(10px, auto, auto, 10px)
- rect(auto, auto, auto, auto)
- rect(10px, 100px, 80px, 10px)
<style type="text/css">
img.clip {
position: absolute;
/* top, right, bottom, left */
clip: rect(10px, auto, auto, 10px);
}
</style>
<img class="clip" src="/img/elephant1.jpg">clip refresh
Related
- CSS overflow - visible, hidden and scroll for overflowing content
- CSS white-space - collaping and wrapping of whitespaces and newlines
- CSS text-overflow - truncate text with three dots
- HTML pre tag tutorial
