clip CSS property
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
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
/* 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 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.
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
<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>
.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);
}
Specifications
| Specification |
|---|
| CSS Masking Module Level 1 # clip-property |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
clip
|
|
|
|
|
|
|
|
|
|
|
|
|
auto
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Deprecated. Not for use in new websites.
- See implementation notes.