Web/CSS/clip

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.

/* Keyword value */
clip: auto;

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

/* Global values */
clip: inherit;
clip: initial;
clip: unset;

Syntax

Note: Where possible, authors are encouraged to use the newer clip-path property instead.

Values

<<shape>()>: A rectangular <<shape>()> 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.
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

<shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>)

Examples

Clipping an image

CSS

.dotted-border { 
  border: dotted;  
  position: relative; 
  width: 536px;
  height: 350px;
}

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

#top-left {
  left: 360px;
  clip: rect(0, 175px, 113px, 0); 
}


#middle {
  left: 280px;
  clip: rect(119px, 255px, 229px, 80px); 
}

#bottom-right {
  left: 200px;
  clip: rect(235px, 335px, 345px, 160px);
}

HTML

<p class="dotted-border">
  <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
  <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
  <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
  <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
</p>

Result

Specifications

Specification	Status	Comment
CSS Masking Module Level 1The definition of 'clip' in that specification.	Candidate Recommendation	Deprecates `clip` property, suggests `clip-path` as replacement.
CSS Level 2 (Revision 1)The definition of 'clip' in that specification.	Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`clip` Deprecated'	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4 Notes' Full support 4 Notes' Notes' Before Internet Explorer 7, Internet Explorer incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)`.	Opera Full support 7	Safari Full support 1 Notes' Full support 1 Notes' Notes' Safari incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)`.	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1 Notes' Full support 1 Notes' Notes' Safari incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)`.	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
Deprecated. Not for use in new websites.': Deprecated. Not for use in new websites.
See implementation notes.': See implementation notes.