Home/ Questions/Q 3356040
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T02:28:02+00:00

If I specify border: 1px outset blue; as the style for an element, the

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0