Section 8.5.2 of CSS 2.1 and the border-color property

I realize this is minutea, but I wanted to get this down for later recall.

First of all, when working with Firefox, I usually find that it is reliably strict, and so developing for FF will allow you to get a result that transfers to other browsers. Of course, sometimes the strictness is annoying but at least it's reliable. In this case I thought I had found something it just wasn't doing right, but giving it the benefit of the doubt on just being a PITA, I looked at the spec and of course FF was proved right.

The problem was that I was setting some border colors for various containers on the page like so (heavily simplified):

.boxtype1
{
     border-color:blue;
     ...other properties...
}
.boxtype1-alert
{
     border-color:red;
     ...other properties...
}

What I was seeing was that boxtype1 was getting a black border color (the color of the 'color' property in the body tag), and the -alert type box was getting the proper red border - only in FF; IE (6 & 7) and Safari were 'fine' in that they displayed my chosen color as the border color. After cursing FF for it's lame implementation I decided to check the spec and found the answer as related to the use of some border-side specific styling and the order of styles implemented.

The fact is that other declarations subsequent to the style I was using to set color were setting other properties on left/right/top/bottom borders without setting the color:

.boxtype1
{
 border-left:solid 2px;
}

This doesn't leave the color as previously set, but makes it work as "inherit" or default because it was not set specifically.

The solution is to either make sure the order of execution is correct (a fragile waste of time) or set each border specifically, making sure it will take on the style no matter the order.

You can see for yourself that if you have the following html:

    <div class="boxtype1">
        <p>
            Some text with a border around container.
        </p>
    </div>

and apply the following styles:

body
{
    color:Blue;
}
.boxtype1
{
    border:solid 1px;   
}
.boxtype1
{
    border-color:Red;
}
.boxtype1
{
    border-left:solid 2px;   
}

You will get a red border all the way around in IE, but will have a blue, 2px border on the left in FF.