The crop property allows a replaced element to be just a rectangular area of an object, instead of the whole object.

  • Initial valueauto
  • Applies toReplaced elements
  • InheritedNo
  • MediaVisual
  • Computed valueSpecified value
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript
Formal syntax: <shape> | auto

crop: rect(0px, 115px, 85px, 30px)
crop: auto;
  • <shape>rect(top, right, bottom, left)
    Each of the four arguments can be a <length> or a <percentage>. All percentage values are computed relative to the intrinsic dimensions of the element, if there is one.
  • autoThe element's computed intrinsic width and height are the same as its actual intrinsic width and height.
.class {
   crop: rect(0px, 115px, 85px, 30px); 

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.