W3cubDocs

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
			108 ⁽²⁾
		107	107 ⁽²⁾	TP ⁽²⁾
		106	106 ⁽²⁾	16.1 ⁽²⁾
11	105 ⁽²⁾	105	105 ⁽²⁾	16.0 ⁽²⁾	91 ⁽²⁾
10	104 ⁽²⁾	104	104 ⁽²⁾	15.6 ⁽²⁾	90 ⁽²⁾
9	103 ⁽²⁾	103	103 ⁽²⁾	15.5 ⁽²⁾	89 ⁽²⁾
8	102 ⁽²⁾	102	102 ⁽²⁾	15.4 ⁽²⁾	88 ⁽²⁾
Show all
7	101 ⁽²⁾	101	101 ⁽²⁾	15.2-15.3 ⁽²⁾	87 ⁽²⁾
6	100 ⁽²⁾	100	100 ⁽²⁾	15.1 ⁽²⁾	86 ⁽²⁾
5.5	99 ⁽²⁾	99	99 ⁽²⁾	15 ⁽²⁾	85 ⁽²⁾
	98 ⁽²⁾	98	98 ⁽²⁾	14.1 ⁽²⁾	84 ⁽²⁾
	97 ⁽²⁾	97	97 ⁽²⁾	14 ⁽²⁾	83 ⁽²⁾
	96 ⁽²⁾	96	96 ⁽²⁾	13.1 ⁽²⁾	82 ⁽²⁾
	95 ⁽²⁾	95	95 ⁽²⁾	13 ^(2,*)	81 ⁽²⁾
	94 ⁽²⁾	94	94 ⁽²⁾	12.1 ^(2,*)	80 ⁽²⁾
	93 ⁽²⁾	93	93 ⁽²⁾	12 ^(2,*)	79 ⁽²⁾
	92 ⁽²⁾	92	92 ⁽²⁾	11.1 ^(2,*)	78 ⁽²⁾
	91 ⁽²⁾	91	91 ⁽²⁾	11 ^(2,*)	77 ⁽²⁾
	90 ⁽²⁾	90	90 ⁽²⁾	10.1 ^(2,*)	76 ⁽²⁾
	89 ⁽²⁾	89	89 ⁽²⁾	10 ^(2,*)	75 ⁽²⁾
	88 ⁽²⁾	88	88 ⁽²⁾	9.1 ^(2,*)	74 ⁽²⁾
	87 ⁽²⁾	87	87 ⁽²⁾	9 ^(2,*)	73 ⁽²⁾
	86 ⁽²⁾	86	86 ⁽²⁾	8 ^(2,*)	72 ⁽²⁾
	85 ⁽²⁾	85	85 ⁽²⁾	7.1 ^(2,*)	71 ⁽²⁾
	84 ⁽²⁾	84	84 ⁽²⁾	7 ^(2,*)	70 ⁽²⁾
	83 ⁽²⁾	83	83 ⁽²⁾	6.1	69 ⁽²⁾
	81 ⁽²⁾	82	81 ⁽²⁾	6	68 ⁽²⁾
	80 ⁽²⁾	81	80 ⁽²⁾	5.1	67 ⁽²⁾
	79 ⁽²⁾	80	79 ⁽²⁾	5	66 ⁽²⁾
	18 ^(4,5)	79	78 ⁽²⁾	4	65 ⁽²⁾
	17	78	77 ⁽²⁾	3.2	64 ⁽²⁾
	16	77	76 ⁽²⁾	3.1	63 ⁽²⁾
	15	76	75 ⁽²⁾		62 ⁽²⁾
	14	75	74 ⁽²⁾		60 ⁽²⁾
	13	74	73 ⁽²⁾		58 ⁽²⁾
	12	73	72 ⁽²⁾		57 ⁽²⁾
		72	71 ⁽²⁾		56 ⁽²⁾
		71	70 ⁽²⁾		55 ⁽²⁾
		70	69 ⁽²⁾		54 ⁽²⁾
		69	68 ⁽²⁾		53 ⁽²⁾
		68	67 ⁽²⁾		52 ⁽²⁾
		67	66 ⁽²⁾		51 ⁽²⁾
		66	65 ⁽²⁾		50 ⁽²⁾
		65	64 ⁽²⁾		49 ⁽²⁾
		64	63 ⁽²⁾		48 ⁽²⁾
		63	62 ⁽²⁾		47 ⁽²⁾
		62	61 ⁽²⁾		46 ⁽²⁾
		61	60 ⁽²⁾		45 ⁽²⁾
		60	59 ⁽²⁾		44 ⁽²⁾
		59	58 ⁽²⁾		43 ⁽²⁾
		58	57 ⁽²⁾		42 ⁽²⁾
		57	56 ⁽²⁾		41 ^(2,*)
		56	55 ⁽²⁾		40 ^(2,*)
		55	54 ^(2,*)		39 ^(2,*)
		54	53 ^(2,*)		38 ^(2,*)
		53 ^(1,3)	52 ^(2,*)		37 ^(2,*)
		52 ^(1,3)	51 ^(2,*)		36 ^(2,*)
		51 ^(1,3)	50 ^(2,*)		35 ^(2,*)
		50 ^(1,3)	49 ^(2,*)		34 ^(2,*)
		49 ^(1,3)	48 ^(2,*)		33 ^(2,*)
		48 ^(1,3)	47 ^(2,*)		32 ^(2,*)
		47 ^(1,3)	46 ^(2,*)		31 ^(2,*)
		46 ⁽¹⁾	45 ^(2,*)		30 ^(2,*)
		45 ⁽¹⁾	44 ^(2,*)		29 ^(2,*)
		44 ⁽¹⁾	43 ^(2,*)		28 ^(2,*)
		43 ⁽¹⁾	42 ^(2,*)		27 ^(2,*)
		42 ⁽¹⁾	41 ^(2,*)		26 ^(2,*)
		41 ⁽¹⁾	40 ^(2,*)		25 ^(2,*)
		40 ⁽¹⁾	39 ^(2,*)		24 ^(2,*)
		39 ⁽¹⁾	38 ^(2,*)		23 ^(2,*)
		38 ⁽¹⁾	37 ^(2,*)		22 ^(2,*)
		37 ⁽¹⁾	36 ^(2,*)		21 ^(2,*)
		36 ⁽¹⁾	35 ^(2,*)		20 ^(2,*)
		35 ⁽¹⁾	34 ^(2,*)		19 ^(2,*)
		34 ⁽¹⁾	33 ^(2,*)		18 ^(2,*)
		33 ⁽¹⁾	32 ^(2,*)		17 ^(2,*)
		32 ⁽¹⁾	31 ^(2,*)		16 ^(2,*)
		31 ⁽¹⁾	30 ^(2,*)		15 ^(2,*)
		30 ⁽¹⁾	29 ^(2,*)		12.1
		29 ⁽¹⁾	28 ^(2,*)		12
		28 ⁽¹⁾	27 ^(2,*)		11.6
		27 ⁽¹⁾	26 ^(2,*)		11.5
		26 ⁽¹⁾	25 ^(2,*)		11.1
		25 ⁽¹⁾	24 ^(2,*)		11
		24 ⁽¹⁾	23		10.6
		23 ⁽¹⁾	22		10.5
		22 ⁽¹⁾	21		10.0-10.1
		21 ⁽¹⁾	20		9.5-9.6
		20 ⁽¹⁾	19		9
		19 ⁽¹⁾	18
		18 ⁽¹⁾	17
		17 ⁽¹⁾	16
		16 ⁽¹⁾	15
		15 ⁽¹⁾	14
		14 ⁽¹⁾	13
		13 ⁽¹⁾	12
		12 ⁽¹⁾	11
		11 ⁽¹⁾	10
		10 ⁽¹⁾	9
		9 ⁽¹⁾	8
		8 ⁽¹⁾	7
		7 ⁽¹⁾	6
		6 ⁽¹⁾	5
		5 ⁽¹⁾	4
		4 ⁽¹⁾
		3.6 ⁽¹⁾
		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
16.1 ⁽²⁾
16.0 ⁽²⁾	all	105 ⁽²⁾	10	64 ⁽²⁾	105 ⁽²⁾	104	11	13.4 ⁽²⁾	18.0 ^(2,*)	13.1 ⁽²⁾	13.18 ⁽²⁾	2.5 ^(1,3)
15.6 ⁽²⁾		4.4.3-4.4.4 ^(2,*)	7	12.1			10		17.0 ^(2,*)
15.5 ⁽²⁾		4.4 ^(2,*)		12					16.0 ^(2,*)
15.4 ⁽²⁾		4.2-4.3		11.5					15.0 ^(2,*)
Show all
15.2-15.3 ⁽²⁾		4.1		11.1					14.0 ^(2,*)
15.0-15.1 ⁽²⁾		4		11					13.0 ^(2,*)
14.5-14.8 ⁽²⁾		3		10					12.0 ^(2,*)
14.0-14.4 ⁽²⁾		2.3							11.1-11.2 ^(2,*)
13.4-13.7 ⁽²⁾		2.2							10.1 ^(2,*)
13.3 ⁽²⁾		2.1							9.2 ^(2,*)
13.2 ⁽²⁾									8.2 ^(2,*)
13.0-13.1 ⁽²⁾									7.2-7.4 ^(2,*)
12.2-12.5 ^(2,*)									6.2-6.4 ^(2,*)
12.0-12.1 ^(2,*)									5.0-5.4 ^(2,*)
11.3-11.4 ^(2,*)									4 ^(2,*)
11.0-11.2 ^(2,*)
10.3 ^(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