clip-path

The clip-path property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area. There used to be a clip property, but note that is deprecated.

.clip-me {  
  
  position: absolute;  /* absolute or fixed positioning required */

  /* deprecated version */
  /* clip: rect(110px, 160px, 170px, 60px); or "auto" */

  /* current version */
  clip-path: rect(110px, 160px, 170px, 60px);

  /* reset/default on deprecated version */
  /* clip: auto; */

  /* reset/default on current version */
  clip-path: none;
}

The most common use case would be an image, but it’s not limited to that. You could just as easily apply clip-path to a paragraph tag and only a portion of the text.

<img class="clip-me" src="thing-to-be-clipped.png">

<p class="clip-me">
  I'll be clipped.
</p>

Those four values in rect() (in the CSS above) represent the top/left point and the bottom/right point, which forms the visible rectangle. Everything outside of that rectangle is hidden.

Other possible values:

.clip-me { 

  /* referencing path from (inline SVG?)  */
  clip-path: url(#c1); 

  /* referencing path from external SVG */
  clip-path: url(path.svg#c1);

  /* rounded rectangle */
  clip-path: inset(10% 10% 10% 10% round 20%, 20%);

  /* circle */
  clip-path: circle(30px at 35px 35px);

  /* ellipse */
  clip-path: ellipse(65px 30px at 125px 40px);

}

Example SVG clip path:

<clipPath id="clipping">
  <circle cx="150" cy="150" r="50" />
  <rect x="150" y="150" width="100" height="100" />
</clipPath>

Browser Support

The spec says to use commas to separate the values. IE 4-7 support this property, only without the spaces. Probably safest to use the commas.

Have seen report of browser on iPad 1 not supporting it.