The clip-path property allows you to specify which portions of an element to crop off to prevent them from being displayed, so that only a part of an image is shown. This is done through specifying a path, which can be specified as a URL referencing an inline or external SVG file, or a shape method, such as circle(). It is non-inherited and the values it supports are listed in Table 15.2. It is worth noting that it is supported only by Chrome and Opera with the -webkit- prefix as of time of writing.
See Chapter 8 on more on vendor prefixes. Figures 15.7 and 15.8 show how the property is used and the effect.
In the example, notice how the parameters for the circle () method are specified. The first specifies the radius as 30% of the width of the <img> element (i.e., reference box), and the last two specify the x-y coordinate for the center as 50% of the width from left and 50% of the height from the top. The browser essentially resolves these percentages from the reference box width and height using a formula. Note that textual contents too can be clipped.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.