Some updates to stunningcss3.com, and a border-image problem

In my book Stunning CSS3, I linked to tons of resources so my readers could find out more information about the topics I was teaching, see different uses for a given property, and get useful tools to play and practice with. (You can see all the links here.) I have a horrible link addiction. Anyway, I knew that a few of the list of links were going to get out of date quickly, so I said in the book that I’d post a few choice lists as articles on the  book’s companion site, www.stunningcss3.com, and keep them updated. I recently took a pass through the following articles and updated their content:

• Where to Find Fonts that Allow @font-face Embedding
• Font-embedding Services
• @font-face File Types Browser Support

It seems as though there’s a new source for webfonts every day, so despite my best efforts, I doubt the first two of these articles are comprehensive. If there are any resources that I’m missing that you think should be added, please let me know!

These articles are as much for me as for anyone else, but check them out—I think you’ll find them useful too.

While I was updating the site, I noticed a couple problems with the border image that I use on the list of places to buy the book in the sidebar as well as the featured review on the home page. In Chrome, the color wasn’t displaying in the middle part of the box. This was due to my omission of the keyword fill from the border-image declaration. It used to have no browser support, with all the browsers filling the content area of a box with the middle portion of the border image by default, but now it appears Chrome is correctly dropping out the middle portion. I added the keyword fill to fix this:

.highlight-box {
	border-width: 21px 16px 21px 16px;
	-moz-border-image: url(../img/box.png) 21 16 21 16 fill stretch;
	-o-border-image: url(../img/box.png) 21 16 21 16 fill stretch;
	-webkit-border-image: url(../img/box.png) 21 16 21 16 fill stretch;
	border-image: url(../img/box.png) 21 16 21 16 fill stretch;
}

In Firefox, the middle portion of the border image is displayed, but none of the side edges, so you see a straight sided rectangle. I keep staring at the border-image declaration, trying to see where the mistake is, and I can’t see anything wrong with it. I tried removing fill and stretch, but neither of these variations worked.

I doubt that Firefox has stopped supporting border-image, so I’m sure I must be doing something wrong. I just can’t figure out what. Can someone tell me where I’ve screwed up?