A tabbed menu with CSS3 rounded corners

A tabbed menu with CSS3 rounded corners is quite simple to build. To begin, here's a basic navigation menu:

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Demos</a></li>
<li><a href="#">About</a></li>
</ul>

Now let's add some styles:

#navigation {

  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-top: 0.5em solid #fff;
  border-bottom: 0.4em solid #666;

}

#navigation li {

  float: left;
  height: 2em;
  margin: 0 0.5em;

}

#navigation a:link,
#navigation a:visited {

  float: left;
  height: 1.6em;
  padding: 0.2em 0.5em;
  background: #666;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-width: 0.1em 0.1em 0 0.1em;
  border-style: solid;
  border-color: #666;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  line-height: 1.6em;
  position: relative;
  top: 0.3em;

}

#navigation a:hover {

  text-decoration: underline;

}

Our navigation menu has a solid bottom border. By using relative positioning on each link, we actually make the rounded bottom borders disappear. It's important to note that the lengths used on the navigation menu bottom border must be proportional to the length used with relative positioning. Note that you need to set the overflow property instead of giving an height to the menu in order to make it work on Opera (thanks to Daniele Grillenzoni for the suggestion). You can see the final result here.

Leave a Reply

Note: Only a member of this blog may post a comment.