CSS clip

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);

<img class="clip" src="/img/elephant1.jpg">
clip refresh



Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments