The release of Firefox 54 is just around the corner and it will introduce new features into an already cool CSS property:
clip-pathis 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: