html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS clip property

Definition

The CSS clip property allows us to specify the displayable dimensions, of a visible absolutely positioned element.

Applies To

All absolutely positioned elements.

Property Values

negative values are acceptable when clipping elements..

auto - The element clip property value will have no clipping applied.

inherit - The element will inherit the clip property of its parent element.

shape - The only valid colour for shapes at present is rect (top, right, bottom, left).

the values are offset from the border edges of an elements box

Default Value

Default value is set to auto which assigns the value 0 to the clip property values.

Inheritance

The clip property is NOT inherited from the parent element unless specified using the inherit property value.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS clip property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS clip Property</title>

<!-- Valid values for CSS clip Property are:
	
	auto, inherit and shape.
	
--> 

<style type="text/css">

/* Set Relative Positioning */
.div1 {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  position: relative;
}

/* Absolute Positioning (no clipping) */
#img1 {
  position: absolute;
  top: -15px;
  right: 25px;
  border: 2px solid red;
}
#img2 {
  position: absolute;
  top: 15px;
  right: 25px;
  clip: rect(0px, 75px, 75px, 0px);
  border: 2px solid green;
}

</style>

</head>
<body>
<h1>CSS clip Property</h1>
<h2>Absolute Positioning (no clipping)</h2>
<div class="div1">
<p>Image will NOT be clipped.
<img id="img1" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" /> 
</p>
</div>
<div class="div1">
<h2>Absolute Positioning (clipping)</h2>
<p>Image will be clipped.
<img id="img2" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" /> 
</p>
</div>
</body>
</html>

How It Looks

The results of using the clip property with the values above will look something like the following:

notepad
CSS clear    << Prev          Next >>   CSS color

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.