Если я определяю border: 1px outset blue; как стиль для элемента, браузер отображает два разных цвета границы: один для верхней и левой границ, а другой для нижней и правой границ.
li
{ border: 10px outset #0000FF;
color: #FFF;
background-color: #0000FF;
width: 30%;
}
p
{ margin: 1em 2em;
text-align: center;
}<li><p>Hi!</p></li>
Существует не один алгоритм указанный в CSS:
UA могут выбрать собственный алгоритм для расчета фактических используемых цветов.
Различные браузеры выполняют значительно разные вещи:
Firefox смешивает выделенную границу с полным белым (около 57%), а нижняя граница - с полным черным (около 68%).
Opera смешивает границы с белым и черным менее сильно (по 25%).
WebKit (Safari, Chrome) смешивает границу нижнего уровня с черным (33%), оставляя выделенную границу как нетронутый указанный цвет.
IE разделяет ширину границы по два, когда вы используете вставку/начало. Внутренняя половина границы имеет оттенок оттенка 75% черного и нетронутый цвет подсветки. Внешняя половина границы имеет цвет подсветки, затененный 25% до черного, а цвет подсветки - 50%. Это приводит к воспроизведению стиля границы кнопки Windows 9x/NT4/2000, если ширина границы равна 2px.
К сожалению, вы не можете получать согласованные результаты из границ вставки/выхода/паза/гребня. Часто результаты разные, но все же в порядке между браузерами; если это не достаточно хорошо, вам нужно будет указать каждый цвет стороны границы явно.