3d navigation buttons with CSS

Creating 3d navigation buttons with CSS is not a difficult task, provided that we understand a basic principle: using outset or inset as values for the border-style property leads to inconsistent results across browsers, especially in Internet Explorer. So we have to find another way. Given that a 3d effect is an effect usually achieved on desktop environments by using certain color combinations, we're going to follow the same approach here. Thus, given the following markup:

<ul id="navigation">

     <li><a href="#">Home</a></li>
     <li><a href="#">Articles</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Sitemap</a></li>

</ul>

we can add the following styles:

#navigation {
 margin: 0;
 padding: 0;
 list-style: none;
 background: #396;
 color: #fff;
 width: 100%;
 float: left;
}

#navigation li {
 float: left;
 height: 100%;
 padding: 0 0.5em;
}

#navigation li a:link,
#navigation li a:visited {
 background: #4a7;
 border: 0.2em solid;
 border-color: #cec #464 #575 #dfd;
 color: #fff;
 padding: 0.1em 0.5em;
 text-decoration: none;
 font-weight: bold;
 float: left;
 height: 1.8em;
 line-height: 1.8;
}

#navigation li a:hover {
 background: #396;
 color: #fff;
 border-color: #575 #dfd #cec #464;
}

The key aspect here are the different values given to the border-color property: by combining different border colors we can actually achieve the desired result by giving to our buttons the appearance of 3d images. You can see the final result here.