Some updates to, and a border-image problem

I recently updated the articles on @font-face that are on the companion site for my book Stunning CSS3. In doing so, I also discovered border-image isn’t working in Firefox, and I can’t figure out how to fix it.

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,, and keep them updated. I recently took a pass through the following articles and updated their content:

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?

Did you like this?

4 Responses to “Some updates to, and a border-image problem”

    • SuzShook

      Though that solved the border-image not showing at all in Firefox, it now makes the border-image disappear in Opera, replaced by a thick black left-border. What’s with that? anyone else seeing this? Suz

      • Dan Smith

        For any that got this far,

        I fixed the opera issue by also designating border-color: transparent; and adding the -o- prefix to border-image.


Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>