Толстые границы CSS, не дающие чистый прямоугольник

Question

Это кажется очень простым, но на удивление не находило никого, столкнувшегося с этой проблемой раньше. Посмотри на этой скрипке:

http://jsfiddle.net/XVhW4/

Он имеет толстую 4px границы, как это:

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

Если вы заметили, верхняя граница толщины не отображается в чистом прямоугольнике. Его трапеция с небольшим конусом сверху вниз. Я проверил, что это происходит как на MAC OS X, так и на Windows, а также на Firefox, Chrome и IE. Вы можете увеличить масштаб изображения примерно до 4 раз.

Это что-то я могу исправить? Почему это происходит?

Answer 1

Вот Hacky способом можно зафиксировать чистый прямоугольник сверху границу:

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

Это ожидаемый результат, когда у вас есть границы с разной толщиной.

угловой край идет от внешнего угла к внутреннему углу:

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

Если углы были по диагонали, внутренние углы не совпадают:

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

Если углы были вырезаны прямо , они не будут перекрываться так, как вы хотели. Браузеры перекрывают углы по-разному, поэтому в некоторых вы получите:

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

и в других, вы получите:

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

То же будет идти на другие углы, но не постоянно. Некоторые браузеры будут перекрывать верхнюю границу с обеих сторон, некоторые из них будут перекрывать верхнюю часть одной из сторон, а некоторые из них будут перекрывать верхнюю часть обеих сторон.

Чтобы получить такие углы вырезывания, вам просто нужно использовать более одного элемента. Вы можете использовать один элемент только для верхней границы, или вы можете обернуть два элемента и установить верхнюю границу для внешнего элемента.