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
		147	144 ⁽²⁾
		146	143 ⁽²⁾	TP ⁽²⁾
		145	142 ⁽²⁾	26.1 ⁽²⁾
11	141 ⁽²⁾	144	141 ⁽²⁾	26.0 ⁽²⁾	122 ⁽²⁾
10	140 ⁽²⁾	143	140 ⁽²⁾	18.5-18.6 ⁽²⁾	121 ⁽²⁾
9	139 ⁽²⁾	142	139 ⁽²⁾	18.4 ⁽²⁾	120 ⁽²⁾
8	138 ⁽²⁾	141	138 ⁽²⁾	18.3 ⁽²⁾	119 ⁽²⁾
Show all
7	137 ⁽²⁾	140	137 ⁽²⁾	18.2 ⁽²⁾	118 ⁽²⁾
6	136 ⁽²⁾	139	136 ⁽²⁾	18.1 ⁽²⁾	117 ⁽²⁾
5.5	135 ⁽²⁾	138	135 ⁽²⁾	18.0 ⁽²⁾	116 ⁽²⁾
	134 ⁽²⁾	137	134 ⁽²⁾	17.6 ⁽²⁾	115 ⁽²⁾
	133 ⁽²⁾	136	133 ⁽²⁾	17.5 ⁽²⁾	114 ⁽²⁾
	132 ⁽²⁾	135	132 ⁽²⁾	17.4 ⁽²⁾	113 ⁽²⁾
	131 ⁽²⁾	134	131 ⁽²⁾	17.3 ⁽²⁾	112 ⁽²⁾
	130 ⁽²⁾	133	130 ⁽²⁾	17.2 ⁽²⁾	111 ⁽²⁾
	129 ⁽²⁾	132	129 ⁽²⁾	17.1 ⁽²⁾	110 ⁽²⁾
	128 ⁽²⁾	131	128 ⁽²⁾	17.0 ⁽²⁾	109 ⁽²⁾
	127 ⁽²⁾	130	127 ⁽²⁾	16.6 ⁽²⁾	108 ⁽²⁾
	126 ⁽²⁾	129	126 ⁽²⁾	16.5 ⁽²⁾	107 ⁽²⁾
	125 ⁽²⁾	128	125 ⁽²⁾	16.4 ⁽²⁾	106 ⁽²⁾
	124 ⁽²⁾	127	124 ⁽²⁾	16.3 ⁽²⁾	105 ⁽²⁾
	123 ⁽²⁾	126	123 ⁽²⁾	16.2 ⁽²⁾	104 ⁽²⁾
	122 ⁽²⁾	125	122 ⁽²⁾	16.1 ⁽²⁾	103 ⁽²⁾
	121 ⁽²⁾	124	121 ⁽²⁾	16.0 ⁽²⁾	102 ⁽²⁾
	120 ⁽²⁾	123	120 ⁽²⁾	15.6 ⁽²⁾	101 ⁽²⁾
	119 ⁽²⁾	122	119 ⁽²⁾	15.5 ⁽²⁾	100 ⁽²⁾
	118 ⁽²⁾	121	118 ⁽²⁾	15.4 ⁽²⁾	99 ⁽²⁾
	117 ⁽²⁾	120	117 ⁽²⁾	15.2-15.3 ⁽²⁾	98 ⁽²⁾
	116 ⁽²⁾	119	116 ⁽²⁾	15.1 ⁽²⁾	97 ⁽²⁾
	115 ⁽²⁾	118	115 ⁽²⁾	15 ⁽²⁾	96 ⁽²⁾
	114 ⁽²⁾	117	114 ⁽²⁾	14.1 ⁽²⁾	95 ⁽²⁾
	113 ⁽²⁾	116	113 ⁽²⁾	14 ⁽²⁾	94 ⁽²⁾
	112 ⁽²⁾	115	112 ⁽²⁾	13.1 ⁽²⁾	93 ⁽²⁾
	111 ⁽²⁾	114	111 ⁽²⁾	13 ^(2,*)	92 ⁽²⁾
	110 ⁽²⁾	113	110 ⁽²⁾	12.1 ^(2,*)	91 ⁽²⁾
	109 ⁽²⁾	112	109 ⁽²⁾	12 ^(2,*)	90 ⁽²⁾
	108 ⁽²⁾	111	108 ⁽²⁾	11.1 ^(2,*)	89 ⁽²⁾
	107 ⁽²⁾	110	107 ⁽²⁾	11 ^(2,*)	88 ⁽²⁾
	106 ⁽²⁾	109	106 ⁽²⁾	10.1 ^(2,*)	87 ⁽²⁾
	105 ⁽²⁾	108	105 ⁽²⁾	10 ^(2,*)	86 ⁽²⁾
	104 ⁽²⁾	107	104 ⁽²⁾	9.1 ^(2,*)	85 ⁽²⁾
	103 ⁽²⁾	106	103 ⁽²⁾	9 ^(2,*)	84 ⁽²⁾
	102 ⁽²⁾	105	102 ⁽²⁾	8 ^(2,*)	83 ⁽²⁾
	101 ⁽²⁾	104	101 ⁽²⁾	7.1 ^(2,*)	82 ⁽²⁾
	100 ⁽²⁾	103	100 ⁽²⁾	7 ^(2,*)	81 ⁽²⁾
	99 ⁽²⁾	102	99 ⁽²⁾	6.1	80 ⁽²⁾
	98 ⁽²⁾	101	98 ⁽²⁾	6	79 ⁽²⁾
	97 ⁽²⁾	100	97 ⁽²⁾	5.1	78 ⁽²⁾
	96 ⁽²⁾	99	96 ⁽²⁾	5	77 ⁽²⁾
	95 ⁽²⁾	98	95 ⁽²⁾	4	76 ⁽²⁾
	94 ⁽²⁾	97	94 ⁽²⁾	3.2	75 ⁽²⁾
	93 ⁽²⁾	96	93 ⁽²⁾	3.1	74 ⁽²⁾
	92 ⁽²⁾	95	92 ⁽²⁾		73 ⁽²⁾
	91 ⁽²⁾	94	91 ⁽²⁾		72 ⁽²⁾
	90 ⁽²⁾	93	90 ⁽²⁾		71 ⁽²⁾
	89 ⁽²⁾	92	89 ⁽²⁾		70 ⁽²⁾
	88 ⁽²⁾	91	88 ⁽²⁾		69 ⁽²⁾
	87 ⁽²⁾	90	87 ⁽²⁾		68 ⁽²⁾
	86 ⁽²⁾	89	86 ⁽²⁾		67 ⁽²⁾
	85 ⁽²⁾	88	85 ⁽²⁾		66 ⁽²⁾
	84 ⁽²⁾	87	84 ⁽²⁾		65 ⁽²⁾
	83 ⁽²⁾	86	83 ⁽²⁾		64 ⁽²⁾
	81 ⁽²⁾	85	81 ⁽²⁾		63 ⁽²⁾
	80 ⁽²⁾	84	80 ⁽²⁾		62 ⁽²⁾
	79 ⁽²⁾	83	79 ⁽²⁾		60 ⁽²⁾
	18 ^(4,5)	82	78 ⁽²⁾		58 ⁽²⁾
	17	81	77 ⁽²⁾		57 ⁽²⁾
	16	80	76 ⁽²⁾		56 ⁽²⁾
	15	79	75 ⁽²⁾		55 ⁽²⁾
	14	78	74 ⁽²⁾		54 ⁽²⁾
	13	77	73 ⁽²⁾		53 ⁽²⁾
	12	76	72 ⁽²⁾		52 ⁽²⁾
		75	71 ⁽²⁾		51 ⁽²⁾
		74	70 ⁽²⁾		50 ⁽²⁾
		73	69 ⁽²⁾		49 ⁽²⁾
		72	68 ⁽²⁾		48 ⁽²⁾
		71	67 ⁽²⁾		47 ⁽²⁾
		70	66 ⁽²⁾		46 ⁽²⁾
		69	65 ⁽²⁾		45 ⁽²⁾
		68	64 ⁽²⁾		44 ⁽²⁾
		67	63 ⁽²⁾		43 ⁽²⁾
		66	62 ⁽²⁾		42 ⁽²⁾
		65	61 ⁽²⁾		41 ^(2,*)
		64	60 ⁽²⁾		40 ^(2,*)
		63	59 ⁽²⁾		39 ^(2,*)
		62	58 ⁽²⁾		38 ^(2,*)
		61	57 ⁽²⁾		37 ^(2,*)
		60	56 ⁽²⁾		36 ^(2,*)
		59	55 ⁽²⁾		35 ^(2,*)
		58	54 ^(2,*)		34 ^(2,*)
		57	53 ^(2,*)		33 ^(2,*)
		56	52 ^(2,*)		32 ^(2,*)
		55	51 ^(2,*)		31 ^(2,*)
		54	50 ^(2,*)		30 ^(2,*)
		53 ^(1,3)	49 ^(2,*)		29 ^(2,*)
		52 ^(1,3)	48 ^(2,*)		28 ^(2,*)
		51 ^(1,3)	47 ^(2,*)		27 ^(2,*)
		50 ^(1,3)	46 ^(2,*)		26 ^(2,*)
		49 ^(1,3)	45 ^(2,*)		25 ^(2,*)
		48 ^(1,3)	44 ^(2,*)		24 ^(2,*)
		47 ^(1,3)	43 ^(2,*)		23 ^(2,*)
		46 ⁽¹⁾	42 ^(2,*)		22 ^(2,*)
		45 ⁽¹⁾	41 ^(2,*)		21 ^(2,*)
		44 ⁽¹⁾	40 ^(2,*)		20 ^(2,*)
		43 ⁽¹⁾	39 ^(2,*)		19 ^(2,*)
		42 ⁽¹⁾	38 ^(2,*)		18 ^(2,*)
		41 ⁽¹⁾	37 ^(2,*)		17 ^(2,*)
		40 ⁽¹⁾	36 ^(2,*)		16 ^(2,*)
		39 ⁽¹⁾	35 ^(2,*)		15 ^(2,*)
		38 ⁽¹⁾	34 ^(2,*)		12.1
		37 ⁽¹⁾	33 ^(2,*)		12
		36 ⁽¹⁾	32 ^(2,*)		11.6
		35 ⁽¹⁾	31 ^(2,*)		11.5
		34 ⁽¹⁾	30 ^(2,*)		11.1
		33 ⁽¹⁾	29 ^(2,*)		11
		32 ⁽¹⁾	28 ^(2,*)		10.6
		31 ⁽¹⁾	27 ^(2,*)		10.5
		30 ⁽¹⁾	26 ^(2,*)		10.0-10.1
		29 ⁽¹⁾	25 ^(2,*)		9.5-9.6
		28 ⁽¹⁾	24 ^(2,*)		9
		27 ⁽¹⁾	23
		26 ⁽¹⁾	22
		25 ⁽¹⁾	21
		24 ⁽¹⁾	20
		23 ⁽¹⁾	19
		22 ⁽¹⁾	18
		21 ⁽¹⁾	17
		20 ⁽¹⁾	16
		19 ⁽¹⁾	15
		18 ⁽¹⁾	14
		17 ⁽¹⁾	13
		16 ⁽¹⁾	12
		15 ⁽¹⁾	11
		14 ⁽¹⁾	10
		13 ⁽¹⁾	9
		12 ⁽¹⁾	8
		11 ⁽¹⁾	7
		10 ⁽¹⁾	6
		9 ⁽¹⁾	5
		8 ⁽¹⁾	4
		7 ⁽¹⁾
		6 ⁽¹⁾
		5 ⁽¹⁾
		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
26.1 ⁽²⁾
26.0 ⁽²⁾	all	141 ⁽²⁾	10	80 ⁽²⁾	141 ⁽²⁾	143	11	15.5 ⁽²⁾	28 ⁽²⁾	14.9 ⁽²⁾	13.52 ⁽²⁾	3.0-3.1
18.5-18.6 ⁽²⁾		4.4.3-4.4.4 ^(2,*)	7	12.1			10		27 ⁽²⁾			2.5 ^(1,3)
18.4 ⁽²⁾		4.4 ^(2,*)		12					26 ⁽²⁾
18.3 ⁽²⁾		4.2-4.3		11.5					25 ⁽²⁾
Show all
18.2 ⁽²⁾		4.1		11.1					24 ⁽²⁾
18.1 ⁽²⁾		4		11					23 ⁽²⁾
18.0 ⁽²⁾		3		10					22 ⁽²⁾
17.6-17.7 ⁽²⁾		2.3							21 ⁽²⁾
17.5 ⁽²⁾		2.2							20 ⁽²⁾
17.4 ⁽²⁾		2.1							19.0 ⁽²⁾
17.3 ⁽²⁾									18.0 ⁽²⁾
17.2 ⁽²⁾									17.0 ⁽²⁾
17.1 ⁽²⁾									16.0 ⁽²⁾
17.0 ⁽²⁾									15.0 ⁽²⁾
16.6-16.7 ⁽²⁾									14.0 ⁽²⁾
16.5 ⁽²⁾									13.0 ⁽²⁾
16.4 ⁽²⁾									12.0 ⁽²⁾
16.3 ⁽²⁾									11.1-11.2 ⁽²⁾
16.2 ⁽²⁾									10.1 ⁽²⁾
16.1 ⁽²⁾									9.2 ⁽²⁾
16.0 ⁽²⁾									8.2 ⁽²⁾
15.6-15.8 ⁽²⁾									7.2-7.4 ⁽²⁾
15.5 ⁽²⁾									6.2-6.4 ⁽²⁾
15.4 ⁽²⁾									5.0-5.4 ^(2,*)
15.2-15.3 ⁽²⁾									4 ^(2,*)
15.0-15.1 ⁽²⁾
14.5-14.8 ⁽²⁾
14.0-14.4 ⁽²⁾
13.4-13.7 ⁽²⁾
13.3 ⁽²⁾
13.2 ⁽²⁾
13.0-13.1 ⁽²⁾
12.2-12.5 ^(2,*)
12.0-12.1 ^(2,*)
11.3-11.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