|clip-source||A URL which can point to an inline SVG element (or) an SVG element in an external file that contains the clip path's definition.|
|basic-shape||Refers to one among |
|clip-geometry-box||This can have one among |
|mask-reference||This can be |
|repeat-style||This specifies how the mask should be repeated or tiled in the X and Y axes. The supported values are |
|mask-mode||Can be |
|position||This specifies the position of each mask layer and is similar in behavior to the |
|geometry-box||This specifies the box to which the mask should be clipped (mask painting area) or the box which should be used as reference for the mask's origin (mask positioning area) depending on the property. The list of possible values are |
|bg-size||This represents the size of each mask-image layer and has the same syntax as |
|compositing-operator||This can be any one among |
CSS Clipping and Masking are very new concepts and so the browser support for these properties are pretty low.
As at the time of writing (Jul '16), Chrome, Safari and Opera support these properties with the
Firefox doesn't require prefixes but it supports masks only when used with SVG
mask elements. For inline SVG
mask elements, the syntax is
mask: url(#msk) whereas for using
mask elements in an external SVG file the syntax is
#msk in both cases refers to the
id of the
mask element that is being referred to. As indicated in this answer, at present Firefox doesn't support any parameter other than
mask-reference in the
Internet Explorer (and Edge) does not offer any support for this property as yet.
mask-mode property is currently not supported by any browser with or without prefixes.
As at the time writing (Jul '16) Chrome, Safari and Opera supports
clip-path when the path is created using basic shapes (like
polygon) or the
url(#clipper) syntax with inline SVG. They don't support clipping based on shapes that are part of external SVG files. Also, they require the
-webkit prefix to be present.
Firefox supports only the
url() syntax for
clip-path whereas Internet Explorer (and Edge) offer no support.