CSS3.com

CSS CLIP

A clipping area describes the portions of an element's rendering box that are visible (when an element's 'overflow' property is not set to 'visible'.)

Parent element clipping regions also apply to calculating a current element's clipping area; in cases where multiple clipping regions apply to an element, only the intersection of the multiple regions should be displayed. Be sure to take careful note of the syntax, source origin and what the measurements, as they confused me for a long time!

Example


p { 
  overflow: scroll; 
  position: absolute; 
  width: 50px; 
  height: 50px;
  clip: rect(5px 40px 40px 5px) 
}


some text

Possible Values

inherit: Explicitly sets the value of this property to that of the parent.
auto: The clipping region is the same size as the element's rendering box.
[shape]: rect([top] [right] [bottom] [left]). This syntax defines a rectangular area where [top], [right], [bottom], and [left] are offsets from each respective side of the element's rendering box.

Go Back