W3docs
en
Log in

CSS clip Property

The CSS clip property applies only to absolutely positioned elements, that are elements with position: absolute or position: fixed.Try Examples.

The clip property allows a rectangle to clip a positioned element. The rectangle is specified as four coordinates: top, right, bottom, left. These values define offsets from the padding edge of the element. The rect(top, right, bottom, left) order follows a clockwise direction starting from the top. All four sides may be either a length or auto. auto is the default value.

The clip property does not work if the value of the overflow property is set to visible.

Info

If possible, the newer clip-path property can be used instead because the clip property is obsolete and removed from the CSS specification. For modern browsers, use clip-path: inset(top right bottom left) or clip-path: rect(...) as a direct replacement.

Initial Valueauto
Applies toAbsolutely positioned elements.
InheritedNo.
AnimatableNo.
VersionCSS2
DOM Syntaxobject.style.clip = "rect(10px,40px,40px,10px)";

Syntax

Syntax of CSS clip Property

clip: auto | shape | initial | inherit;

Example of the clip property:

Example of CSS clip Property with auto value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        clip: auto;
      }
    </style>
  </head>
  <body>
    <img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com" />
  </body>
</html>
Try it Yourself »

Result

CSS clip Property

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

Example of the clip property with the "rect" value:

Example of CSS clip Property with shape value

<!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="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com logo" />
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
autoDoes not clip an element. This is default value.Play it »
shapeClips an element. The only valid value is rect(top, right, bottom, left).Play it »
initialIt makes the property use its default value.Play it »
inheritIt inherits the property from its parent element.

Practice

Practice

What is the function of the 'clip' property in CSS?