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); 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 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
<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://udn.realityripple.com/samples/8f/15174f3500.jpg" title="Original graphic"> <img id="top-left" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="Graphic clipped to upper left"> <img id="middle" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="Graphic clipped towards middle"> <img id="bottom-right" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="Graphic clipped to bottom right"> </p>
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
clip | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE
Full support
4
| Opera Full support 7 | Safari
Full support
1
| 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
| 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.
See also
- This property is deprecated. Use
clip-path
instead. - Related CSS properties:
text-overflow
,white-space
,overflow-x
,overflow-y
,overflow
,display
,position