clip

  • Revision slug: CSS/clip
  • Revision title: clip
  • Revision id: 28014
  • Created:
  • Creator: Searlea
  • Is current revision? No
  • Comment /* Browser compatibility */

Revision Content

{{template.CSSRef()}}

Summary

clip CSS property defines what portion of an element is visible.

  • {{template.Xref_cssinitial()}}: auto
  • Applies to: absolutely positioned elements
  • {{template.Xref_cssinherited()}}: no
  • Percentages: n/a
  • Media: {{template.Xref_cssvisual()}}
  • {{template.Xref_csscomputed()}}: For rectangle values, a rectangle consisting of four computed lengths; otherwise, as specified

Syntax

clip: <shape> | auto | inherit

Values

{{template.Xref_cssshape()}}
specify a shape of the form rect(<top>, <right>, <bottom>, <left>);
{{template.Cssxref("auto")}}
{{template.Cssxref("inherit")}}


Examples

{{template.CSSRefExampleLink("clip")}}

  img.clip04 { 
    clip: rect(10px, 20px, 20px, 10px);
  }

Notes

Specifications

Browser compatibility

(Sample Compatibility Chart)

Browser Lowest Version
Internet Explorer 4
Firefox 1
Netscape 4
Opera 7
Safari 1

See also

{{template.Cssxref("overflow")}}, {{template.Cssxref("position")}}

{{ wiki.languages( { "fr": "fr/CSS/clip" } ) }}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>clip</code> CSS property defines what portion of an element is visible.
</p>
<ul><li> {{template.Xref_cssinitial()}}: auto
</li><li> Applies to: absolutely positioned elements 
</li><li> {{template.Xref_cssinherited()}}: no 
</li><li> Percentages: n/a
</li><li> Media: {{template.Xref_cssvisual()}}
</li><li> {{template.Xref_csscomputed()}}: For rectangle values, a rectangle consisting of four computed lengths; otherwise, as specified 
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">clip: &lt;shape&gt; | auto | inherit
</pre>
<h3 name="Values"> Values </h3>
<dl><dt>{{template.Xref_cssshape()}}</dt><dd> specify a shape of the form <code>rect(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;);</code>
</dd><dt>{{template.Cssxref("auto")}}</dt><dd>
</dd><dt>{{template.Cssxref("inherit")}}</dt><dd>
</dd></dl>
<p><br>
</p>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("clip")}}
</p>
<pre>  img.clip04 { 
    clip: rect(10px, 20px, 20px, 10px);
  }
</pre>
<h3 name="Notes"> Notes </h3>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#clip">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<p>(Sample Compatibility Chart)
</p>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Safari</td>
    <td>1</td>
  </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("overflow")}}, {{template.Cssxref("position")}}
</p>{{ wiki.languages( { "fr": "fr/CSS/clip" } ) }}
Revert to this revision