HTML & CSS Wiki

READ MORE

HTML & CSS Wiki

The clip property is used in CSS and certain HTML elements. It defines what portion of an element is visible. This property applies only to elements with position:absolute;.

Values[]

  • <shape> - A rectangular shape of the form:
rect(<top>, <right>, <bottom>, <left>)  /* standard syntax */
or
rect(<top> <right> <bottom> <left>)  /* backwards compatible syntax */
where <top> and <bottom> specify offsets from the top border edge of the box, and <right> and <left> specify offsets from the left border edge of the box.
<top>, <right>, <bottom>, and <left> may either have a <length> value (px, em, etc) or auto.
  • auto - The element does not clip (default value).


HTML example:

<img style="clip:rect(40px 60px 100px 75px);" src="Image1.png" />


CSS example:

img {
     clip:rect(40px 60px 100px 75px);
}