W3cubDocs

/Support Tables

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
      73 (2)    
    65 72 (2)    
    64 71 (2) TP (2,*)  
11 18 63 70 (2) 12 (2,*) 56 (2)
10 17 62 69 (2) 11.1 (2,*) 55 (2)
9 16 61 68 (2) 11 (2,*) 54 (2)
8 15 60 67 (2) 10.1 (2,*) 53 (2)
Show all
7 14 59 66 (2) 10 (2,*) 52 (2)
6 13 58 65 (2) 9.1 (2,*) 51 (2)
5.5 12 57 64 (2) 9 (2,*) 50 (2)
    56 63 (2) 8 (2,*) 49 (2)
    55 62 (2) 7.1 (2,*) 48 (2)
    54 61 (2) 7 (2,*) 47 (2)
    53 (1,3) 60 (2) 6.1 46 (2)
    52 (1,3) 59 (2) 6 45 (2)
    51 (1,3) 58 (2) 5.1 44 (2)
    50 (1,3) 57 (2) 5 43 (2)
    49 (1,3) 56 (2) 4 42 (2)
    48 (1,3) 55 (2) 3.2 41 (2,*)
    47 (1,3) 54 (2,*) 3.1 40 (2,*)
    46 (1) 53 (2,*)   39 (2,*)
    45 (1) 52 (2,*)   38 (2,*)
    44 (1) 51 (2,*)   37 (2,*)
    43 (1) 50 (2,*)   36 (2,*)
    42 (1) 49 (2,*)   35 (2,*)
    41 (1) 48 (2,*)   34 (2,*)
    40 (1) 47 (2,*)   33 (2,*)
    39 (1) 46 (2,*)   32 (2,*)
    38 (1) 45 (2,*)   31 (2,*)
    37 (1) 44 (2,*)   30 (2,*)
    36 (1) 43 (2,*)   29 (2,*)
    35 (1) 42 (2,*)   28 (2,*)
    34 (1) 41 (2,*)   27 (2,*)
    33 (1) 40 (2,*)   26 (2,*)
    32 (1) 39 (2,*)   25 (2,*)
    31 (1) 38 (2,*)   24 (2,*)
    30 (1) 37 (2,*)   23 (2,*)
    29 (1) 36 (2,*)   22 (2,*)
    28 (1) 35 (2,*)   21 (2,*)
    27 (1) 34 (2,*)   20 (2,*)
    26 (1) 33 (2,*)   19 (2,*)
    25 (1) 32 (2,*)   18 (2,*)
    24 (1) 31 (2,*)   17 (2,*)
    23 (1) 30 (2,*)   16 (2,*)
    22 (1) 29 (2,*)   15 (2,*)
    21 (1) 28 (2,*)   12.1
    20 (1) 27 (2,*)   12
    19 (1) 26 (2,*)   11.6
    18 (1) 25 (2,*)   11.5
    17 (1) 24 (2,*)   11.1
    16 (1) 23   11
    15 (1) 22   10.6
    14 (1) 21   10.5
    13 (1) 20   10.0-10.1
    12 (1) 19   9.5-9.6
    11 (1) 18   9
    10 (1) 17    
    9 (1) 16    
    8 (1) 15    
    7 (1) 14    
    6 (1) 13    
    5 (1) 12    
    4 (1) 11    
    3.6 (1) 10    
    3.5 (1) 9    
    3 8    
    2 7    
      6    
      5    
      4    
iOS Safari Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser
12 (2,*) all 67 (2) 10 46 (2,*) 70 (2) 63 11 11.8 (2,*) 7.2 (2,*) 1.2 (2,*) 7.12 (2)
11.3-11.4 (2,*)   4.4.3-4.4.4 (2,*) 7 12.1     10   6.2 (2,*)    
11.0-11.2 (2,*)   4.4 (2,*)   12         5 (2,*)    
10.3 (2,*)   4.2-4.3   11.5         4 (2,*)    
Show all
10.0-10.2 (2,*)   4.1   11.1              
9.3 (2,*)   4   11              
9.0-9.2 (2,*)   3   10              
8.1-8.4 (2,*)   2.3                  
8 (2,*)   2.2                  
7.0-7.1 (2,*)   2.1                  
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.

  1. Partial support refers to only supporting the url() syntax.

  2. Partial support refers to supporting shapes and the url(#foo) syntax for inline SVG, but not shapes in external SVGs.

  3. Supports shapes behind the layout.css.clip-path-shapes.enabled flag

* Partial support with prefix.

Resources

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