CSS Shapes, Clipping and Masking

The release of Firefox 54 is just around the corner and it will introduce new features into an already cool CSS property: clip-path.

clip-path is a property that allows us to clip (i.e., cut away) parts of an element. Up until now, in Firefox you could only use an SVG to clip an element:

But with Firefox 54, you will be able to use CSS shapes as well: insets, circles, ellipses and polygons!, circles, ellipses and polygons!

Do note that clipping is different from masking. Masking just hides some content – leaving the bounding box unaltered – clipping actually cuts away things:

CSS Shapes, Clipping and Masking →