CSS3 Border images
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 |
|---|---|---|---|---|---|
| 57 | 62 (2) | ||||
| 56 | 61 (2) | TP (1) | 48 (2) | ||
| 16 | 55 | 60 (2) | 11 (1) | 47 (2) | |
| 11 | 15 | 54 | 59 (2) | 10.1 (1) | 46 (2) |
| 10 | 14 | 53 | 58 (2) | 10 (1) | 45 (2) |
| 9 | 13 (1) | 52 | 57 (2) | 9.1 (1) | 44 (2) |
| 8 | 12 (1) | 51 | 56 (2) | 9 (1,2,4) | 43 (2) |
| Show all | |||||
| 7 | 50 | 55 (2) | 8 (1,2,4) | 42 (2) | |
| 6 | 49 (2) | 54 (2) | 7.1 (1,2,4) | 41 (2) | |
| 5.5 | 48 (2) | 53 (2) | 7 (1,2,4) | 40 (2) | |
| 47 (2) | 52 (2) | 6.1 (1,2,4) | 39 (2) | ||
| 46 (2) | 51 (2) | 6 (1,2,4) | 38 (2) | ||
| 45 (2) | 50 (1,2) | 5.1 (1,2,3,4,*) | 37 (1,2) | ||
| 44 (2) | 49 (1,2) | 5 (1,2,3,4,*) | 36 (1,2) | ||
| 43 (2) | 48 (1,2) | 4 (1,2,3,4,*) | 35 (1,2) | ||
| 42 (2) | 47 (1,2) | 3.2 (1,2,3,4,*) | 34 (1,2) | ||
| 41 (2) | 46 (1,2) | 3.1 (1,2,3,4,*) | 33 (1,2) | ||
| 40 (2) | 45 (1,2) | 32 (1,2) | |||
| 39 (2) | 44 (1,2) | 31 (1,2) | |||
| 38 (2) | 43 (1,2) | 30 (1,2) | |||
| 37 (2) | 42 (1,2) | 29 (1,2) | |||
| 36 (2) | 41 (1,2) | 28 (1,2) | |||
| 35 (2) | 40 (1,2) | 27 (1,2) | |||
| 34 (2) | 39 (1,2) | 26 (1,2) | |||
| 33 (2) | 38 (1,2) | 25 (1,2) | |||
| 32 (2) | 37 (1,2) | 24 (1,2) | |||
| 31 (2) | 36 (1,2) | 23 (1,2) | |||
| 30 (2) | 35 (1,2) | 22 (1,2) | |||
| 29 (2) | 34 (1,2) | 21 (1,2) | |||
| 28 (2) | 33 (1,2) | 20 (1,2) | |||
| 27 (2) | 32 (1,2) | 19 (1,2) | |||
| 26 (2) | 31 (1,2) | 18 (1,2) | |||
| 25 (2) | 30 (1,2) | 17 (1,2) | |||
| 24 (2) | 29 (1,2,4) | 16 (1,2) | |||
| 23 (2) | 28 (1,2,4) | 15 (1,2) | |||
| 22 (2) | 27 (1,2,4) | 12.1 (2,3,4,*) | |||
| 21 (2) | 26 (1,2,4) | 12 (2,3,4,*) | |||
| 20 (2) | 25 (1,2,4) | 11.6 (2,3,4,*) | |||
| 19 (2) | 24 (1,2,4) | 11.5 (2,3,4,*) | |||
| 18 (2) | 23 (1,2,4) | 11.1 (2,3,4,*) | |||
| 17 (2) | 22 (1,2,4) | 11 (2,3,4,*) | |||
| 16 (2) | 21 (1,2,4) | 10.6 (2,3,4) | |||
| 15 (2) | 20 (1,2,4) | 10.5 (2,3,4) | |||
| 14 (2,3,*) | 19 (1,2,4) | 10.0-10.1 | |||
| 13 (2,3,*) | 18 (1,2,4) | 9.5-9.6 | |||
| 12 (2,3,*) | 17 (1,2,4) | 9 | |||
| 11 (2,3,*) | 16 (1,2,4) | ||||
| 10 (2,3,*) | 15 (1,2,4) | ||||
| 9 (2,3,*) | 14 (1,2,3,4,*) | ||||
| 8 (2,3,*) | 13 (1,2,3,4,*) | ||||
| 7 (2,3,*) | 12 (1,2,3,4,*) | ||||
| 6 (2,3,*) | 11 (1,2,3,4,*) | ||||
| 5 (2,3,*) | 10 (1,2,3,4,*) | ||||
| 4 (2,3,*) | 9 (1,2,3,4,*) | ||||
| 3.6 (2,3,*) | 8 (1,2,3,4,*) | ||||
| 3.5 (2,3,*) | 7 (1,2,3,4,*) | ||||
| 3 | 6 (1,2,3,4,*) | ||||
| 2 | 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 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 11 (1) | |||||||||||
| 10.3 (1) | all (2,3,4,*) | 56 (1,2) | 10 (1,2,4) | 37 (1,2) | 59 (2) | 54 | 11 | 11.4 (1,2) | 5 (2) | 1.2 (2) | 7.12 (2) |
| 10.0-10.2 (1) | 4.4.3-4.4.4 (1,2) | 7 (1,2,3,4) | 12.1 (2,3,4,*) | 10 | 4 (1,2) | ||||||
| 9.3 (1) | 4.4 (1,2) | 12 (2,3,4,*) | |||||||||
| 9.0-9.2 (1,2,4) | 4.2-4.3 (1,2,3,4,*) | 11.5 (2,3,4,*) | |||||||||
| Show all | |||||||||||
| 8.1-8.4 (1,2,4) | 4.1 (1,2,3,4,*) | 11.1 (2,3,4,*) | |||||||||
| 8 (1,2,4) | 4 (1,2,3,4,*) | 11 (2,3,4,*) | |||||||||
| 7.0-7.1 (1,2,4) | 3 (1,2,3,4,*) | 10 | |||||||||
| 6.0-6.1 (1,2,4) | 2.3 (1,2,3,4,*) | ||||||||||
| 5.0-5.1 (1,2,3,4,*) | 2.2 (1,2,3,4,*) | ||||||||||
| 4.2-4.3 (1,2,3,4,*) | 2.1 (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.
Has a bug where
border-imageincorrectly overridesborder-style. See test case, WebKit bug, discussionPartial support refers to not supporting
border-image-repeat: spacePartial support refers to supporting the shorthand syntax, but not the individual properties (
border-image-source,border-image-slice, etc).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
roundvalue 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
