clip-path

The clip-path property in CSS allows you to specify a specific region of an element to display, with the rest being hidden (or “clipped”) away.

.clip-me {  
  
  /* Example: clip away the element from the top, right, bottom, and left edges */
  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  
  /* Example: clip element into a Heptagon */
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);


  /* Deprecated version */
  position: absolute; /* absolute or fixed positioning required */
  clip: rect(110px, 160px, 170px, 60px); /* or "auto" */
  /* values descript a top/left point and bottom/right point */
} 

There used to be a clip property, but note that is deprecated.

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="/images/image-to-be-clipped.png" alt="Descriptioin of image">

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

Those four values in inset() (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 an inline SVG  */
  clip-path: url(#c1); 

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

  /* polygon */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

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

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

  /* inset-rectangle() may replace inset() ? */
  /* rectangle() coming in SVG 2 */

  /* rounded corners... not sure if a thing anymore */
  clip-path: inset(10% 10% 10% 10% round 20%, 20%);

}

Example SVG clip path:

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

It’s very weird that clip-path didn’t support the path() function out of the gate, since path() is already a thing for properties like motion-path. Firefox has support for it now though, and we’re waiting for the rest of the browsers. See An Initial Implementation of clip-path: path();

Make Your Own

Until we can reliably use path(), the most useful clips for fancy custom shapes is polygon(). Here’s a really neat editor for those from Mads Stoumann (which works for circles and ellipses as well):

More Information

• Clipping and Masking in CSS
• clip-path on WPD
• clip-path on MDN
• Clippy: Bennett Feely’s clip-path maker
• Clipping and masking on MDN
• The (deprecated) CSS Clip Property (Impressive Webs)
• Spec on CSS Masking
• CSS Masking by Dirk Schulze
• Clipping in CSS and SVG – The clip-path Property and Element by Sara Soueidan
• Pens tagged clip-path on CodePen
• Demos and browser support demo Pen by Yoksel
• SVG Masks by Jakob Jenkov
• Alan Greenblatt’s research on browser support levels for clipping and masking features

Browser Support