Thick CSS borders not giving a clean rectangle

Question

This seems very simple, but surprisingly didn't find anybody facing this problem before. Take a look at this fiddle:

http://jsfiddle.net/XVhW4/

It has a thick 4px border like this:

<div style="border: 1px solid #E3E3E3; border-top: 4px solid rgb(255, 153, 0);width: 300px; height: 250px;"></div>

If you notice, the top thick border is not rendered in a clean rectangle. Its a trapezium with small taper from top to bottom. I checked that this occurs on both MAC OS X and Windows and also on Firefox, Chrome and IE. You can zoom it to about 4x observe this very clearly.

Is this something I can fix? Why does this occur?

Answer 1

Here is a hacky way you can fix a clean rectangle top-border:

HTML

<div id="test_div"></div>

CSS

#test_div:before { 
    position:absolute; 
    width:100%; 
    padding:1px; 
    top:0; 
    content: '';
    left:-1px;
    background:#000; 
    height:1px; }

#test_div { 
    border: 1px solid #E3E3E3; 
    border-top:0; 
    width: 300px;
    height: 250px; 
    position:relative; }

jsFiddle

Answer 2

That is the expected result when you have borders with different thickness.

The corner edge goes from the outer corner to the inner corner:

*****************************
**
**
* *
* *
*  **************************
*  *
*  *
*  *

If the corners were diagonal, the inner corners would not match:

*****************************
**
* **
*  **
*  * **
*  *   **********************
*  *
*  *
*  *

If the corners were cut straight, they would not overlap in the way that you wanted. Browsers overlap the corners differently, so in some you would get:

*****************************
*  *
*  *
*  *
*  *
*  **************************
*  *
*  *
*  *

and in others you would get:

*****************************
*
*
*
*
*****************************
*  *
*  *
*  *

The same would go for the other corners, but not consistently. Some browsers would make the top border overlap both sides, some would make one of the sides overlap the top, and some would make both sides overlap the top.

To get that kind of straight cut corners you simply need to use more than one element. You can use one element just for the top border, or you can wrap two elements and set the top border on the outer element.