How do browsers determine which exact colors to use for border: inset or outset?

Question

If I specify border: 1px outset blue; as the style for an element, the browser renders two different border colors: one for the top and left borders, and another for the bottom and right borders.

li
  { border: 10px outset #0000FF;
    color: #FFF;
    background-color: #0000FF;
    width: 30%;
    }

p
  { margin: 1em 2em;
    text-align: center;
    }

<li><p>Hi!</p></li>

Given a single color specified for the border, how does the browser determine which colors to render the border in? Alternately, given a graphical comp (a .PSD for example) that shows an outset border with two different colors, how can I choose a single border color to specify to get the closest results to the comp?

Answer 1

There is no one algorithm specified by CSS:

UAs may choose their own algorithm to calculate the actual colors used.

Different browsers do significantly different things:

• Firefox blends the highlight border with full white (about 57%) and the lowlight border with full black (about 68%).

• Opera blends the borders with white and black less strongly (25% each).

• WebKit (Safari, Chrome) blends the lowlight border to black (33%) whilst leaving the highlight border as the untouched stated colour.

• IE splits the width of the border in two when you use inset/outset. The inside half of the border has a lowlight shade of 75% black and an untouched highlight colour. The outside half of the border has a highlight colour shaded 25% to black and a lowlight colour shaded 50% to black. This has the effect of reproducing the border style of the Windows 9x/NT4/2000 button if the border-width is 2px.

Unfortunately you cannot get consistent results out of inset/outset/groove/ridge borders. Often the results are different but still OK across browsers; if that's not good enough you'll need to specify each border side colour explicitly.