X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS clip Property

The clip property allows a rectangle to clip a positioned element. The rectangle is specified as four coordinates: top, right, bottom, left. The values of top and bottom specify offsets from the inside top border edge of the box, while the values of right and left specify offsets from the inside left border edge of the box. All four sides may be either a length or auto. "Auto" is the default value.

Initial Value auto
Applies to "Absolutely" positioned elements.
Inherited No.
Animatable Yes. Background-color is animatable.
Version CSS2
DOM Syntax object.style.clip = "rect(10px,40px,40px,10px)";

Syntax

clip: auto | shape | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      position: absolute;
      clip: auto;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
  </body>
</html>

In the following example the rectangle clips the image according to the set values.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      position: absolute;
      clip: rect(0px,70px,200px,0px);
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
  </body>
</html>

Values

Value Description
auto Does not clip an element. This is defautl value.
shape Clips an element. The only valid value is: rect (top, right, bottom, left).
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 7.0+


Related Resources ΒΆ

Do you find this helpful?

Related articles