clip

{{Deprecated_Header}}

[!WARNING] Authors are encouraged to use the {{cssxref("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 {{cssxref("position","position:absolute")}} or {{cssxref("position","position:fixed")}}.

Syntax

/* 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 {{cssxref("<length>")}} or auto. If any side's value is auto, the element is clipped to that side's inside border edge.

[!NOTE] The rect() {{cssxref("shape")}} function used in the deprecated clip property is different from the CSS {{cssxref("basic-shape/rect","rect()")}} function used to define a CSS {{cssxref("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

{{cssinfo}}

Formal syntax

{{csssyntax}}

Examples

Clipping an image

<p class="dotted-border">
  
  
  
  
</p>

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

{{EmbedLiveSample('clipping_an_image', '', '450px')}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{cssxref("clip-path")}}
• {{cssxref("position")}}
• {{cssxref("mask")}}
• {{cssxref("shape-image-threshold")}}
• {{cssxref("shape-outside")}}