This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

clip

Summary

Deprecated; see clip-path.

Lets you specify the dimensions of an absolutely positioned element that should be visible, and the element is clipped into this shape, and displayed.

Overview table

Initial value
:

Applies to
All elements
Inherited
No
Media
visual

Computed value
:

Animatable
No

CSS Object Model Property
:

Syntax

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

Values

auto
Default. Clip to expose entire object.
rect(top, right, bottom, left)
Top, right, bottom, and left specify length values, any of which can be replaced by auto, leaving that side not clipped. The value of top specifies that everything above this value on the Y axis (with 0 at the top) is clipped. The value of right specifies that everything above this value on the X axis (with 0 at the left) is clipped. The value of bottom specifies that everything below this value on the Y axis (with 0 at the top) is clipped. The value of left specifies that everything to the left of this value on the X axis (with 0 at the left) is clipped.

Examples

This example takes the Web Platform Docs logo and clips it in two ways: one shows the icon and the other shows the text.

img.clippable {
  /**
   * The `clip` property applies only to absolutely positioned elements only.
   * @see http://www.w3.org/TR/css-masking/#clip-property
   */
  position: absolute;
  top: 100px;
}

img.clipped-icon {
  left: 215px;
  /**
   * The rectangle clips the image leaving only the icon visible.
   * For Internet Explorer 4-7, use `clip: rect(10px 68px 63px 3px);`
   */
  clip: rect(10px, 68px, 63px, 3px);
}

img.clipped-text {
  left: 300px;
  /**
   * The rectangle clips the image leaving only the text visible.
   * For Internet Explorer 4-7, use `clip: rect(10px 190px 63px 53px);`
   */
  clip: rect(10px, 190px, 63px, 53px);
}

View live example

The HTML for the above example.



  <img class="clippable original" src="/logo/wplogo_pillow_wide_tan.png" alt="Web Platform Docs logo" />
  <img class="clippable clipped-icon" src="/logo/wplogo_pillow_wide_tan.png" alt="Web Platform Docs logo (icon only)" title="Web Platform Docs logo (icon only)" />
  <img class="clippable clipped-text" src="/logo/wplogo_pillow_wide_tan.png" alt="Web Platform Docs logo (text only)" title="Web Platform Docs logo (text only)" />

Notes

Remarks

As of Windows Internet Explorer 8, the required syntax of the clip attribute 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 EmulateIE8 mode with an Internet Explorer 8 !DOCTYPE directive). 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) The required syntax of the clip attribute is identical to that specified in the CSS2.1 specification; that is, commas are now required between the parameters of the rect() value. 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 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). The clip attribute and the clip property are available on the Macintosh platform, as of Microsoft Internet Explorer 5.

Syntax

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

See also

Related articles

Visual Effects

Related pages

Attributions