CSS clip-path property (for HTML)

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

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

Usage: 2.58% + 95.1% = 97.7%

Support summary

IE: Not supported
Edge: partial since 79, available but disabled by default since 18, notes for version 18₄, notes for version 79₂
Firefox: 54, partial since 3.5, notes for version 3.5₁, notes for version 47₁
Chrome: partial since 24, prefixed since 24, notes for version 24₂, notes for version 55₂
Safari: partial since 7, prefixed since 7, notes for version 7₂, notes for version 13.1₂
Opera: partial since 15, prefixed since 15, notes for version 15₂, notes for version 42₂
Safari on iOS: partial since 7.0-7.1, prefixed since 7.0-7.1, notes for version 7.0-7.1₂, notes for version 13.0-13.1₂
Opera Mini: Not supported
Android Browser: partial since 4.4, prefixed since 4.4, notes for version 4.4₂, notes for version 124₂
Blackberry Browser: Not supported
Opera Mobile: partial since 80, notes for version 80₂
Chrome for Android: partial since 124, notes for version 124₂
Firefox for Android: 125
IE Mobile: Not supported
UC Browser for Android: partial since 15.5, notes for version 15.5₂
Samsung Internet: partial since 4, prefixed since 4, notes for version 4₂, notes for version 6.2-6.4₂
QQ Browser: partial since 14.9, notes for version 14.9₂
Baidu Browser: partial since 13.52, notes for version 13.52₂
KaiOS Browser: 3.0-3.1, partial since 2.5, notes for version 2.5₁

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 ↑

Full support table

IE

5.5	6	7	8	9	10	11
n	n	n	n	n	n	n

Edge

12	13	14	15	16	17	18	79	80	81	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124
n	n	n	n	n	n	n,d	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a

Firefox

2	3	3.5	3.6	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127	128
n	n	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Chrome

4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127
n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a

Safari

3.1	3.2	4	5	5.1	6	6.1	7	7.1	8	9	9.1	10	10.1	11	11.1	12	12.1	13	13.1	14	14.1	15	15.1	15.2-15.3	15.4	15.5	15.6	16.0	16.1	16.2	16.3	16.4	16.5	16.6	17.0	17.1	17.2	17.3	17.4	17.5	TP
n	n	n	n	n	n	n	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a

Opera

9	9.5-9.6	10.0-10.1	10.5	10.6	11	11.1	11.5	11.6	12	12.1	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	60	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109
n	n	n	n	n	n	n	n	n	n	n	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a

Safari on iOS

3.2	4.0-4.1	4.2-4.3	5.0-5.1	6.0-6.1	7.0-7.1	8	8.1-8.4	9.0-9.2	9.3	10.0-10.2	10.3	11.0-11.2	11.3-11.4	12.0-12.1	12.2-12.5	13.0-13.1	13.2	13.3	13.4-13.7	14.0-14.4	14.5-14.8	15.0-15.1	15.2-15.3	15.4	15.5	15.6-15.8	16.0	16.1	16.2	16.3	16.4	16.5	16.6-16.7	17.0	17.1	17.2	17.3	17.4	17.5
n	n	n	n	n	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a

Opera Mini

all
n

Android Browser

2.1	2.2	2.3	3	4	4.1	4.2-4.3	4.4	4.4.3-4.4.4	124
n	n	n	n	n	n	n	a,x	a,x	a

Blackberry Browser

7	10
n	n

Opera Mobile

10	11	11.1	11.5	12	12.1	80
n	n	n	n	n	n	a

Chrome for Android

124
a

Firefox for Android

125
y

IE Mobile

10	11
n	n

UC Browser for Android

15.5
a

Samsung Internet

4	5.0-5.4	6.2-6.4	7.2-7.4	8.2	9.2	10.1	11.1-11.2	12.0	13.0	14.0	15.0	16.0	17.0	18.0	19.0	20	21	22	23	24
a,x	a,x	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a

QQ Browser

14.9
a

Baidu Browser

13.52
a

KaiOS Browser

2.5	3.0-3.1
a	y

y = supported
a = partially supported, see notes
x = supported with a prefix, e.g. moz, webkit
p = supported with a polyfill
d = available but disabled by default; the feature need to be enabled in about:config, chrome://flags, etc.
n = not supported
u = unknown/untested

Back to list