Порядок наложения border border-color

[Kailo]

Существует li блочного типа и на его 4х сторонах есть различный border по 1px, на 3х сторонах одно цвета и на 4й другого. Мне надо определить порядок наложения цветов друг на друга.

ul.MenuBarHorizontal li {
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;
border-top-color: #889180;
border-right-color: #282e22;
border-bottom-color: #889180;
border-left-color: #889180;
}

В разных местах отображает по разному:

В Dreamweaver CS6 верхняя и нижняя выше боковых. В Opera 12.15 не понятно вообще как.

[Yazon_Nile]

Некроссбраузерная штука это.

[SelenIT]

Вообще порядок «выше и ниже» для частей border-а в спецификации определен только для таблиц и их ячеек при border-collapse: collapse. Для обычных блоков они считаются как бы на одном уровне и стыкуются по диагонали (на чем основан знаменитый метод рисования CSS-треугольников). Как эта диагональ будет проведена для однопиксельного border-а, целиком зависит от движка рендеринга.

Можно заменить часть border-ов на box-shadow без размытия, к примеру. Либо задать их другому элементу (вложенному).

А смотреть, как рисует Dreamweaver, по-моему, вообще мало толку. Лучше использовать его только для грубой раскидки блоков по странице, а нюансы отображения смотреть исключительно в реальных браузерах.