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: revert;
clip: unset;
Syntax
Note: Where possible, authors are encouraged to use the newer clip-path
property instead.
Values
<shape()>
-
A rectangular
<shape()>
of the formrect(<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>
orauto
. If any side's value isauto
, 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
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 |
---|
CSS Masking Module Level 1 # clip-property |
Browser compatibility
BCD tables only load in the browser
See also
- This property is deprecated. Use
clip-path
instead. - Related CSS properties:
text-overflow
,white-space
,overflow-x
,overflow-y
,overflow
,display
,position