---
title: clip
slug: Web/CSS/clip
tags:
  - CSS
  - Déprécié
  - Propriété
  - Reference
translation_of: Web/CSS/clip
---
<div>{{CSSRef}}{{deprecated_header}}</div>

<p>La propriété <strong><code>clip</code></strong> permet de définir la zone d'un élément qui est visible. La propriété <code>clip</code> s'applique uniquement aux éléments positionnés de façon absolue (autrement dit, ceux avec {{cssxref("position","position:absolute")}} ou {{cssxref("position","position:fixed")}}).</p>

<pre class="brush: css  no-line-numbers">/* Valeur avec un mot-clé */
clip: auto;

/* Valeurs de forme */
/* Type &lt;shape&gt;     */
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);

/* Valeurs globales */
clip: inherit;
clip: initial;
clip: unset;
</pre>

<div class="warning">
<p><strong>Attention ! </strong>Cette propriété est dépréciée et ne doit plus être utilisée. La propriété {{cssxref("clip-path")}} peut être utilisée à la place.</p>
</div>

<p>{{cssinfo}}</p>

<h2 id="Syntaxe">Syntaxe</h2>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;shape&gt;</code></dt>
 <dd>Une forme rectangulaire indiquée avec <code>rect(&lt;haut&gt;, &lt;droite&gt;, &lt;bas&gt;, &lt;gauche&gt;)</code> ou avec <code>rect(&lt;haut&gt; &lt;droite&gt; &lt;bas&gt; &lt;gauche&gt;)</code>. <code>&lt;haut&gt;</code> et <code>&lt;bas&gt;</code> indiquent les décalages à partir du haut de la boîte de bordure, <code>&lt;gauche&gt;</code> et <code>&lt;droite&gt;</code> indiquent les décalages à partir du bord gauche de la boîte de bordure.</dd>
 <dd><code>&lt;haut&gt;</code>, <code>&lt;droite&gt;</code>, <code>&lt;bas&gt;</code> et <code>&lt;gauche&gt;</code> peuvent avoir une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou<code> auto</code>. Si un des côtés vaut <code>auto</code>, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.</dd>
 <dt><code>auto</code></dt>
 <dd>L'élément n'est pas rogné (la valeur par défaut). Attention, l'effet obtenu n'est pas le même que <code>rect(auto, auto, auto, auto)</code>.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

<pre class="syntaxbox">{{csssyntax}}
</pre>

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush:css">.dotted-border {
  border: dotted;
  position: relative;
  width: 536px;
  height: 350px;
}

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

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


#middle {
  left: 280px;
  clip: rect(119px, 255px, 229px, 80px);
  /* standard syntax, unsupported by Internet Explorer 4-7 */
}

#bottom-right {
  left: 200px;
  clip: rect(235px 335px 345px 160px);
  /* non-standard syntax, but supported by all major browsers*/
}</pre>

<h3 id="HTML">HTML</h3>

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

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Exemples', '689px', '410px')}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td>
   <td>{{Spec2('CSS Masks')}}</td>
   <td>Dépréciation de la propriété <code>clip</code> et proposition de  {{cssxref("clip-path")}} comme remplacement.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td><code>clip</code> peut être animée.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.properties.clip")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>La propriété {{cssxref("clip-path")}} qui doit être utilisée à la place</li>
 <li>{{cssxref("text-overflow")}}</li>
 <li>{{cssxref("white-space")}}</li>
 <li>{{cssxref("overflow-x")}}</li>
 <li>{{cssxref("overflow-y")}}</li>
 <li>{{cssxref("overflow")}}</li>
 <li>{{cssxref("display")}}</li>
 <li>{{cssxref("position")}}</li>
</ul>