Border Imaging
As I dig into the nooks and crannies of the various CSS3 modules, I’ve come across something that seems like I should be able to do, but I can’t make it work in browsers. Now, I know as well as anyone that if you try to do something and browsers won’t do it, it might well be the fault of the browsers. Particularly if you can get various browsers to fail differently on the same declaration, as I have. But this is, bizarrely, complicated enough that it’s hard to be sure if it’s me or them.
So allow me to pose this to you as a challenge. Given the following ideal rendering, how would you arrive at the depicted result using the single 5-pixel-by-5-pixel image shown within the content?
Note that it doesn’t have to be quite as clean as this—if there are partial diamonds adjacent to the corners where repeated images get clipped, that’s fine.
Should you answer, please be clear which type of answer you’re giving:
- What the specification says you should write to make this happen. Note to those tackling this fresh: I think the descriptive prose for
border-image-slice(yes,-slice) makes this harder than it seems, but I could be wrong. - What you wrote to get browsers to do it consistently. (Safari, Firefox, and Opera at a minimum. Did IE9 get border images yet? Vendor prefixes not required unless you had to write different values for different browsers.)
- Both spec- and browser-friendly, which is of course what we really want.
I’m really curious to see if anyone cracks this one, because that person I will grill mercilessly until either I understand what’s happening or one of us starts plotting to have the other killed.