Rounded corners menu

Rounded corners menu is very popular in modern designs and it’s handy to know how to achieve it with a simple CSS applied on a semantic XHTML markup. First, here is the markup:

<ul class="rounded">
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Services</span></a></li>
    <li><a href="#"><span>Portfolio</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
    <li><a href="#"><span>Blog</span></a></li>
</ul>

Quite simple. The only thing that’s not right there are span tags – those are there because it’s the easiest way to add a hover effect (such as color change) to the rounded menu links.

Here are images I used:

The CSS I used:

.rounded li {
    display: inline;
}
.rounded a {
    float: left;
    height: 43px;
    margin-right: 1em;
    background: url('rounded-left.gif') left top no-repeat;
    color: white;
    line-height: 43px;
}
.rounded span {
    float: left;
    height: 43px;
    padding: 0 1em;
    background: url('rounded-right.gif') right top no-repeat;
}

To add the hover effect I used another two images (different only in color):

And two additional styles:

.rounded a:hover {
    background: url('rounded-left-hovered.gif') left top no-repeat;
}
.rounded a:hover span {
    background: url('rounded-right-hovered.gif') right top no-repeat;
}

Here is the demo. Tested in following browsers:

• IE6, IE7
• Firefox
• Opera 9.64
• Chrome 1.0.154.65

You will need to clear the floats after the menu though. I usually do it by adding an additional class to the next element:

.clear {
    clear: both;
}