`clip` CSS property

Deprecated

Avoid using this feature in new projects. The CSS Masking specification deprecated the clip property. This feature may be a candidate for removal from web standards or browsers.

Consider using the following features instead: clip-path.

Learn more
See full compatibility

Warning: Authors are encouraged to use the clip-path property instead.

The clip CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed.

Syntax

css

/* Keyword value */
clip: auto;

/* <shape> values */
clip: rect(1px, 10em, 3rem, 2ch);

/* Global values */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;

Values

rect()

A rectangle defined using a rect() function of the form rect(<top>, <right>, <bottom>, <left>). The <top> and <bottom> values are offsets from the inside top border edge of the box, while <right> and <left> are offsets from the inside left border edge of the box — that is, the extent of the padding box.

The <top>, <right>, <bottom>, and <left> values may be either a <length> or auto. If any side's value is auto, the element is clipped to that side's inside border edge.

Note: The rect() <shape> function used in the deprecated clip property is different from the CSS rect() function used to define a CSS <basic-shape>.

auto: The element does not clip (default). This is different from rect(auto, auto, auto, auto), which clips to the element's inside border edges.

Formal definition

Initial value	`auto`
Applies to	absolutely positioned elements
Inherited	no
Computed value	`auto` if specified as `auto`, otherwise a rectangle with four values, each of which is `auto` if specified as `auto` or the computed length otherwise
Animation type	a rectangle

Formal syntax

clip = 
  <rect()>  |
  auto      

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )

Examples

Clipping an image

html

<p class="dotted-border">
  <img src="macarons.png" alt="Original graphic" />
  <img id="top-left" src="macarons.png" alt="Graphic clipped to upper left" />
  <img id="middle" src="macarons.png" alt="Graphic clipped towards middle" />
  <img
    id="bottom-right"
    src="macarons.png"
    alt="Graphic clipped to bottom right" />
</p>

css

.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}