CSS clip-path property (for HTML)

Method of defining the visible region of an HTML element using SVG or a shape definition.

Spec	https://www.w3.org/TR/css-masking-1/#the-clip-path
Status	W3C Candidate Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
			98 ⁽²⁾
		95	97 ⁽²⁾
		94	96 ⁽²⁾	TP ^(2,*)
11	95 ⁽²⁾	93	95 ⁽²⁾	15 ^(2,*)	80 ⁽²⁾
10	94 ⁽²⁾	92	94 ⁽²⁾	14.1 ^(2,*)	79 ⁽²⁾
9	93 ⁽²⁾	91	93 ⁽²⁾	14 ^(2,*)	78 ⁽²⁾
8	92 ⁽²⁾	90	92 ⁽²⁾	13.1 ^(2,*)	77 ⁽²⁾
Show all
7	91 ⁽²⁾	89	91 ⁽²⁾	13 ^(2,*)	76 ⁽²⁾
6	90 ⁽²⁾	88	90 ⁽²⁾	12.1 ^(2,*)	75 ⁽²⁾
5.5	89 ⁽²⁾	87	89 ⁽²⁾	12 ^(2,*)	74 ⁽²⁾
	88 ⁽²⁾	86	88 ⁽²⁾	11.1 ^(2,*)	73 ⁽²⁾
	87 ⁽²⁾	85	87 ⁽²⁾	11 ^(2,*)	72 ⁽²⁾
	86 ⁽²⁾	84	86 ⁽²⁾	10.1 ^(2,*)	71 ⁽²⁾
	85 ⁽²⁾	83	85 ⁽²⁾	10 ^(2,*)	70 ⁽²⁾
	84 ⁽²⁾	82	84 ⁽²⁾	9.1 ^(2,*)	69 ⁽²⁾
	83 ⁽²⁾	81	83 ⁽²⁾	9 ^(2,*)	68 ⁽²⁾
	81 ⁽²⁾	80	81 ⁽²⁾	8 ^(2,*)	67 ⁽²⁾
	80 ⁽²⁾	79	80 ⁽²⁾	7.1 ^(2,*)	66 ⁽²⁾
	79 ⁽²⁾	78	79 ⁽²⁾	7 ^(2,*)	65 ⁽²⁾
	18 ^(4,5)	77	78 ⁽²⁾	6.1	64 ⁽²⁾
	17	76	77 ⁽²⁾	6	63 ⁽²⁾
	16	75	76 ⁽²⁾	5.1	62 ⁽²⁾
	15	74	75 ⁽²⁾	5	60 ⁽²⁾
	14	73	74 ⁽²⁾	4	58 ⁽²⁾
	13	72	73 ⁽²⁾	3.2	57 ⁽²⁾
	12	71	72 ⁽²⁾	3.1	56 ⁽²⁾
		70	71 ⁽²⁾		55 ⁽²⁾
		69	70 ⁽²⁾		54 ⁽²⁾
		68	69 ⁽²⁾		53 ⁽²⁾
		67	68 ⁽²⁾		52 ⁽²⁾
		66	67 ⁽²⁾		51 ⁽²⁾
		65	66 ⁽²⁾		50 ⁽²⁾
		64	65 ⁽²⁾		49 ⁽²⁾
		63	64 ⁽²⁾		48 ⁽²⁾
		62	63 ⁽²⁾		47 ⁽²⁾
		61	62 ⁽²⁾		46 ⁽²⁾
		60	61 ⁽²⁾		45 ⁽²⁾
		59	60 ⁽²⁾		44 ⁽²⁾
		58	59 ⁽²⁾		43 ⁽²⁾
		57	58 ⁽²⁾		42 ⁽²⁾
		56	57 ⁽²⁾		41 ^(2,*)
		55	56 ⁽²⁾		40 ^(2,*)
		54	55 ⁽²⁾		39 ^(2,*)
		53 ^(1,3)	54 ^(2,*)		38 ^(2,*)
		52 ^(1,3)	53 ^(2,*)		37 ^(2,*)
		51 ^(1,3)	52 ^(2,*)		36 ^(2,*)
		50 ^(1,3)	51 ^(2,*)		35 ^(2,*)
		49 ^(1,3)	50 ^(2,*)		34 ^(2,*)
		48 ^(1,3)	49 ^(2,*)		33 ^(2,*)
		47 ^(1,3)	48 ^(2,*)		32 ^(2,*)
		46 ⁽¹⁾	47 ^(2,*)		31 ^(2,*)
		45 ⁽¹⁾	46 ^(2,*)		30 ^(2,*)
		44 ⁽¹⁾	45 ^(2,*)		29 ^(2,*)
		43 ⁽¹⁾	44 ^(2,*)		28 ^(2,*)
		42 ⁽¹⁾	43 ^(2,*)		27 ^(2,*)
		41 ⁽¹⁾	42 ^(2,*)		26 ^(2,*)
		40 ⁽¹⁾	41 ^(2,*)		25 ^(2,*)
		39 ⁽¹⁾	40 ^(2,*)		24 ^(2,*)
		38 ⁽¹⁾	39 ^(2,*)		23 ^(2,*)
		37 ⁽¹⁾	38 ^(2,*)		22 ^(2,*)
		36 ⁽¹⁾	37 ^(2,*)		21 ^(2,*)
		35 ⁽¹⁾	36 ^(2,*)		20 ^(2,*)
		34 ⁽¹⁾	35 ^(2,*)		19 ^(2,*)
		33 ⁽¹⁾	34 ^(2,*)		18 ^(2,*)
		32 ⁽¹⁾	33 ^(2,*)		17 ^(2,*)
		31 ⁽¹⁾	32 ^(2,*)		16 ^(2,*)
		30 ⁽¹⁾	31 ^(2,*)		15 ^(2,*)
		29 ⁽¹⁾	30 ^(2,*)		12.1
		28 ⁽¹⁾	29 ^(2,*)		12
		27 ⁽¹⁾	28 ^(2,*)		11.6
		26 ⁽¹⁾	27 ^(2,*)		11.5
		25 ⁽¹⁾	26 ^(2,*)		11.1
		24 ⁽¹⁾	25 ^(2,*)		11
		23 ⁽¹⁾	24 ^(2,*)		10.6
		22 ⁽¹⁾	23		10.5
		21 ⁽¹⁾	22		10.0-10.1
		20 ⁽¹⁾	21		9.5-9.6
		19 ⁽¹⁾	20		9
		18 ⁽¹⁾	19
		17 ⁽¹⁾	18
		16 ⁽¹⁾	17
		15 ⁽¹⁾	16
		14 ⁽¹⁾	15
		13 ⁽¹⁾	14
		12 ⁽¹⁾	13
		11 ⁽¹⁾	12
		10 ⁽¹⁾	11
		9 ⁽¹⁾	10
		8 ⁽¹⁾	9
		7 ⁽¹⁾	8
		6 ⁽¹⁾	7
		5 ⁽¹⁾	6
		4 ⁽¹⁾	5
		3.6 ⁽¹⁾	4
		3.5 ⁽¹⁾
		3
		2

Safari on iOS	Opera Mini	Android Browser	Blackberry Browser	Opera Mobile	Android Chrome	Android Firefox	IE Mobile	Android UC Browser	Samsung Internet	QQ Browser	Baidu Browser	KaiOS Browser
15 ^(2,*)	all	94 ⁽²⁾	10	64 ⁽²⁾	94 ⁽²⁾	92	11	12.12 ^(2,*)	15.0 ^(2,*)	10.4 ^(2,*)	7.12 ⁽²⁾	2.5 ^(1,3)
14.5-14.8 ^(2,*)		4.4.3-4.4.4 ^(2,*)	7	12.1			10		14.0 ^(2,*)
14.0-14.4 ^(2,*)		4.4 ^(2,*)		12					13.0 ^(2,*)
13.4-13.7 ^(2,*)		4.2-4.3		11.5					12.0 ^(2,*)
Show all
13.3 ^(2,*)		4.1		11.1					11.1-11.2 ^(2,*)
13.2 ^(2,*)		4		11					10.1 ^(2,*)
13.0-13.1 ^(2,*)		3		10					9.2 ^(2,*)
12.2-12.5 ^(2,*)		2.3							8.2 ^(2,*)
12.0-12.1 ^(2,*)		2.2							7.2-7.4 ^(2,*)
11.3-11.4 ^(2,*)		2.1							6.2-6.4 ^(2,*)
11.0-11.2 ^(2,*)									5.0-5.4 ^(2,*)
10.3 ^(2,*)									4 ^(2,*)
10.0-10.2 ^(2,*)
9.3 ^(2,*)
9.0-9.2 ^(2,*)
8.1-8.4 ^(2,*)
8 ^(2,*)
7.0-7.1 ^(2,*)
6.0-6.1
5.0-5.1
4.2-4.3
4.0-4.1
3.2

Notes

Support refers to the clip-path CSS property on HTML elements specifically. Support for clip-path in SVG is supported in all browsers with basic SVG support.

Partial support refers to only supporting the url() syntax.
Partial support refers to supporting shapes and the url(#foo) syntax for inline SVG, but not shapes in external SVGs.
Supports shapes behind the layout.css.clip-path-shapes.enabled flag
Partial support can be enabled on MS Edge with the Enable CSS Clip-Path Flag
While Edge doesn't seem to recognize any <basic-shape> function, it does allow you to use polygon() in HTML and SVG

^* Partial support with prefix.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-clip-path