clip property

Specifies which part of a positioned object is visible.

This property is read/write.

CSS 2.1, Section 11.1.2

 

Syntax

clip: auto | rect(top, right, bottom, left)

Property values

auto

Initial value. Clip to expose entire object.

rect(top, right, bottom, left)

The top, right, bottom, and left variables specify supported length values, any of which can be replaced by auto, leaving that side not clipped.

ValueDescription

top

Everything above this value on the y-axis (with 0 at the top) is clipped.

right

Everything above this value on the x-axis (with 0 at the left) is clipped.

bottom

Everything below this value on the y-axis (with 0 at the top) is clipped.

left

Everything to the left of this value on the x-axis (with 0 at the left) is clipped.

 

CSS information

Applies Toabsolutely positioned elements
Mediavisual
Inheritedno
Initial Valueauto

Standards information

Remarks

This property defines the shape and size of the positioned object that is visible. The position must be set to absolute. Any part of the object that is outside the clipping region is transparent. Any coordinate can be replaced by the value auto, which exposes the respective side (that is, the side is not clipped).

The order of the values in "clip:rect(0, 0, 50, 50)" renders the object invisible because it sets the top and right positions of the clipping region to 0. To achieve a 50-by-50 view port, use "clip:rect(0, 50, 50, 0)".

Starting in Windows Internet Explorer 8, the required syntax of the clip property is identical to that specified in the Cascading Style Sheets, Level 2 Revision 1 (CSS2.1) specification; that is, commas are now required between the parameters of the rect() value. This behavior requires Windows Internet Explorer to be in IE8 Standards mode or higher. For more information on document compatibility modes, see Defining Document Compatibility.

In Windows Internet Explorer 7 and earlier (and in Internet Explorer 8 or later in IE7 Standards mode, EmulateIE7 mode, or IE5 (Quirks) mode), the commas should be omitted. For example: "clip:rect(0 50 50 0)"

Examples

This example uses the clip property to clip an image of a sphere from the left, right, top, and bottom.



.clipLeft {
   position: absolute;
   top: 40px;
   left: 0;
   clip: rect(auto, auto, auto, 20px);
}
.clipRight {
   position: absolute;
   top: 40px;
   left: 100px;
   clip: rect(auto, 60px, auto, auto);
}
.clipTop {
   position: absolute;
   top: 40px;
   left: 200px;
   clip: rect(20px, auto, auto, auto);
}
.clipBottom {
   position: absolute;
   top: 40px;
   left: 300px;
   clip: rect(auto, auto, 60px, auto);
}


<body>
  <div class="clipLeft">
    <img src="sphere.jpg">
  </div>
  <div class="clipRight">
    <img src="sphere.jpg">
  </div>
  <div class="clipTop">
    <img src="sphere.jpg">
  </div>  
  <div class="clipBottom">
    <img src="sphere.jpg">
  </div>
</body>

The following image shows the result. The sphere image is clipped from the left, right, top, and bottom:

An image showing a sphere clipped from the left, right, top, and bottom.

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
Reference
clipBottom
clipLeft
clipRight
clipTop

 

 

Show:
© 2014 Microsoft