clip
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 thecompatibility 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 theclip-path property instead.
TheclipCSS property defines a visible portion of an element. Theclip property applies only to absolutely positioned elements — that is, elements withposition:absolute orposition: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 theinside top border edge of the box, while<right>and<left>are offsets from theinside 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'sinside border edge.
Note:Therect()<shape> function used in the deprecatedclip property is different from the CSSrect() function used to define a CSS<basic-shape>.
autoThe 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 asauto, otherwise a rectangle with four values, each of which isauto if specified asauto or the computed length otherwise |
| Animation type | arectangle |
Formal syntax
clip =
<rect()>|
auto
<rect()> =
rect(<top> ,<right> ,<bottom> ,<left>)
Examples
Clipping an image
<p> <img src="macarons.png" alt="Original graphic" /> <img src="macarons.png" alt="Graphic clipped to upper left" /> <img src="macarons.png" alt="Graphic clipped towards middle" /> <img 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 |