Stylish navigation bar using CSS

By abhi Last updated Jun 10, 2020

This tutorial explains how to design a Stylish navigation bar using CSS with rounded corners for links.

The result is something like this:

Step 1: HTML page

Create a new HTML page and copy and paste the following code inside <body> tag:

<div id="MainMenu">
    <div id="tab">
        <ul>
            <li class="item_active"><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>About</span></a></li>
            <li><a href="#"><span>Contact</span></a></li>
            <li><a href="#"><span>About</span></a></li>
            <li><a href="#"><span>Contact</span></a></li>
            <li><a href="#"><span>About</span></a></li>
            <li><a href="#"><span>Contact</span></a></li>
        </ul>
    </div>
</div>

Step 2: rounded corners with liquid design for links:

Before to start, I spend few rows to explain how to implement this simple effect using CSS. The typical way is using this simple structure:

<a href="#"><span>About</span></a>

Step 3: CSS file, #MainMenu :

Create a new CSS file (style.css) and copy and paste the following code for #MainMenu element .

#MainMenu
{
    height:37px;
    background: #FFFFFF;
    margin:0;
    border:0;
}

Step 4: CSS file, #tab

Create a new CSS file (style.css) and copy and paste the following code for #tab element (remeber to link this file in your HTML page):

#tab
{
    margin:0;
    top:0;
}
#tab ul
{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
}
#tab li
{
display:inline;
    float:left;
    margin:0;
    padding:0;
}
#tab a
{
    background: url("images/bright_109.gif") no-repeat right top;
    margin:0;
    padding:0;
    text-decoration:none;
    border:0;
    display:block;
    float:left;
}
#tab a span
{
    display:block;
    background:url("images/bleft_109.gif") no-repeat left top;
    padding:0 25px 0 25px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11;
    color:#FFFFFF;
    font-weight:bold;
    line-height:37px;
}
#tab a:hover,#tab li.item_active a
{
    background-position:right bottom;
    border-color:;
}
#tab a:hover span,#tab li.item_active a span
{
    background-position:left bottom;
    color:#000000;
    font-weight:bold;
    font-style:normal;
    text-decoration:none;
}

Save and test the result!

Download this tutorial