Creating a round corner navigation menu button background which looks seamless

Here is a simple method to make the rounded corner button for navigation using css.

1)Add background image
Create a background image for your navigation based on your idea.
zBelow image is an example.


<ul class="nav">
<li><a href="#"><span> Home </span></a></li>
<li><a href="#"><span> Our Services </span></a></li>
<li><a href="#"><span> Sitemap </span></a></li>
<li><a href="#"><span> Contact Us </span></a> </li>
</ul>

3)Add CSS Styles
Add below css styles to your stylesheet files or to your html page

ul.nav{
padding:0;
margin:0;
}
ul.nav li{
float:left;
list-style-type:none;
margin-left:5px;
}
ul.nav li a:link,ul.nav li a:visited{
text-decoration:none;
font-weight:bold;
font-size:14px;
color:#669933;
height:35px;
display:block;
padding-left:15px;
cursor:pointer;
float:left;

}
ul.nav li a:hover{
text-decoration:none;
font-weight:bold;
font-size:14px;
color:#FFFFFF;
background:url(images/nag_bg.jpg) no-repeat;
}
ul.nav li a:hover span{
background:url(images/nag_bg.jpg) no-repeat right;
}
ul.nav li span{
display:block;
height:35px;
padding-right:15px;
line-height:30px;
float:left;
}






2)Add html code
followin is the html code of navigation bar. just add this code to your web page where you want to show the navigation bar


Download sample zip file

Original Post by,
Ajinesh Ravi