This is my text.
Multiple Background Image Conclusions:
- Combining images will be almost impossible until browsers implement the fragment URIs. Note: Firefox already implements it via a vendor specific method.
- Filling with a simple color is not supported at all. Gradient emulation may potentially be used instead until browsers support the image() function.
- Stretching, repeating can be done. There is also support for the round / space method of border images in the specification, but currently it is not supported by WebKit or Firefox.
- SVGs are supported as background image.
Border Image Method Conclusions:
- MODE=INCLUDED seems impossible to support since the content is not drawn over the border area. Update: it seems possible to do this, when playing with border-width vs. image-border-width.
- border-image-outset is not supported at all. This makes it hard to support MODE=OUTER. Update: it seems to be supported on Chrome 16.
- fill seems to be almost always used. A transparent middle must thus always be used. Update: it seems to be fixed on Chrome 16.
- border-image-width is not supported at all (the value is always the one from border-width). This is probably not a problem. Update: it seems to be supported on Chrome 16.
- round as a raster mode is not currently supported in WebKit.
- IE has no support at all (at least natively) for border-image.
- border-image is a very nice way to automatically combine images.
Notes:
- border-image-width permits to limit the size of the border image; but the size of the border is still defined by border-width. Actually, on Chrome the formula seems to be: max(border-image-width, border-width), except if border-width is explicitely set to 0px, then the border size is 0.
- MODE=OUTER: set border-width to 0px (1px on Chrome because of a bug), and use border-image-outset.
- MODE=INNER: set border-width to the size of border-image-width. No need to add any padding.
- MODE=INCLUDED: set border-width to 0px (1px on Chrome because of a bug), and use border-image-width.