Menu With Rounded Corners In CSS - Demo & Code

• Home
• Lorem
• Ipsum
• Dolor
• Sit Amet

HTML code:

<ul id="menu">
	<li><a href="#" class="highlight"><span>Home</span></a></li>	
	<li><a href="#"><span>Lorem</span></a></li>	
	<li><a href="#"><span>Ipsum</span></a></li>	
	<li><a href="#"><span>Dolor</span></a></li>	
	<li><a href="#"><span>Sit Amet</span></a></li>	
</ul>	

CSS code:

#menu {
	float: left;
	padding: 0px 10px;
	margin: 0px;
	border-bottom: 5px solid #05480a;
}

#menu li {
	display: inline;
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#menu li a {
	float: left;
	color: #000000;
	text-decoration: none;
	background: url('menuleft.gif') top left no-repeat;
	margin: 0px 1px;
	padding: 9px 0px 6px 10px;
}

#menu li a span {
	background: url('menuright.gif') top right no-repeat;
	padding: 9px 25px 6px 15px;
}

#menu li a:hover, 
#menu li a.highlight {
	background: url('menuleft-hl.gif') top left no-repeat;
	color: #ffffff;
}

#menu li a:hover span, 
#menu li a.highlight span {
	background: url('menuright-hl.gif') top right no-repeat;
}

Images:

menuleft.gif

menuright.gif

menuleft-hl.gif

menuright-hl.gif