Border color order

Question

I have a table with every border set to 1px width solid. I want the top, left and bottom border to be black, and the right border to be white. So, i used this css code

border-right-color: white;    
border-left-color: black; 
border-top-color: black; 
border-bottom-color: black; 
border: solid 1px;

The problem comes in IE9, where the top right corner pixel will be white, but the bottom right corner will be black.

I suspect the problem comes form the way IE9 reorganize the style, because when i look at the css of my table in the developper tools console, it is ordered like this :

border-top-color: black;
border-right-color: white; 
border-bottom-color: black;  
border-left-color: black; 
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

This let me think that, maybe, the order used to defined colors makes it so the top border is colored black, then the right border is colored white (overwritting the top right corner), then the bottom border is colored black (overwritting the bottom right corner) and finnaly the left border is colored left.

The thing is that, on a white background, the top and bottom borders do not appear to be the same length (by one pixel). It may not be much, but I need those two borders to fit with other lines on my page.

So, how could i fix this? Is it really about the order the borders are colored, and if it is, how could I change that?

Answer 1

The order that you sprecify the border colors is irrelevant. Browsers simply display the borders in different ways. The pixels in the corner get the color from either of the sides, and it depends on what browser you are using.

There are several different methods used. Here are the most common browsers, and how they draw the corners:

Internet Explorer:

+----------------------+--+
|                      |  |
+----------------------|  |
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +----------------------+
|  |                      |
+--+----------------------+

Firefox:

+--+----------------------+
|  |                      |
|  +----------------------+
|  |                   |  |
|  |                   |  |
|  |                   |  |
+----------------------|  |
|                      |  |
+----------------------+--+

Chrome:

+--+----------------------+
|  |                      |
|  |----------------------+
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +----------------------+
|  |                      |
+--+----------------------+

Safari:

+--+-------------------+--+
|  |                   |  |
|  |-------------------|  |
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +-------------------+  |
|  |                   |  |
+--+-------------------+--+

Opera:

+-------------------------+
|                         |
+-------------------------+
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +-------------------+  |
|  |                   |  |
+--+-------------------+--+

It looks almost as if different browser vendors went out of their way to use a method that is different from all other browsers...

(Tested in recent versions. Older versions of any browser might possibly do it differently, but that's not really important as they differ so much anyway.)

So, if you need full control over how the corners are drawn, you get to use two elements inside each other, put vertical borders on one and horisontal borders on the other.

Answer 2

So, here it is, pretty simple in fact

border: solid 1px black;
border-right-style: hidden;

By giving the right border a style hidden, it works perfectly now. The thing is that a border with style hidden will precede on any other style for collapsed or overlying borders.

Answer 3

You can write like this:

div{
 border:1px solid black;
 border-right-color:white;
}