W3cubDocs

/Support Tables

CSS3 Border images

Method of using images for borders

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

Notes

Note that both the border-style and border-width must be specified (not set to none or 0) for border-images to work.

  1. Has a bug where border-image incorrectly overrides border-style. See test case, WebKit bug, discussion

  2. Partial support refers to not supporting border-image-repeat: space

  3. Partial support refers to supporting the shorthand syntax, but not the individual properties (border-image-source, border-image-slice, etc).

  4. Partial support refers to not supporting border-image-repeat: round

* Partial support with prefix.

Bugs

  • Firefox is not able to stretch svg images across an element - bug report.

  • WebKit browsers have a different rendering with the round value from other browsers, stretching the border rather than repeating it in certain cases see bug.

Resources

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