My nav menu has 7px radius on the corners. I need the image i have sent to hover on them to have a radius of 7px when i hover (and active) on the home (left) button only. I have tried #navmenu li.menu-item-home a:hover { border-top-left-radius: 7px; border-bottom-left-radius: 7px; } but that doesn’t seem to work. I have seen on other sites code - #navmenu li.menu-item-513 a:hover (or any number). So how do I know which number to use if that is the way. -THanks
It’s not quite clear what you are asking here. You talk of images and border radius, but just use one or the other. Could you provide a screen shot of what you are hoping to achieve, and either a live link or at least some working example code? Numbers in the CSS class selector have no inherent meaning, so don’t worry about that. It’s just part of the name someone chose to gave it.
Ok. Here is what i have. http://www.flickr.com/photos/77176502@N05/7075350291/in/photostream
Here is what i want but only on the home button. http://www.flickr.com/photos/77176502@N05/6929275202/in/photostream
Here is what happens now. http://www.flickr.com/photos/77176502@N05/7075350421/in/photostream
Here is my code for the menu.
#navmenu {
margin: auto;
}
#navmenu ul {
background: url(images/nav1.png) no-repeat;
float: left;
width: 949px;
position: relative;
top: 20px;
}
#navmenu li {
float: left;
list-style-type: none;
padding: 0px px 0px px;
}
#navmenu li a {
color: #fff;
text-shadow: #000 -1px 0px;
display: block;
padding: 10px 11px 10px 11px;
position: relative;
text-decoration: none;
font-size: 18px;
position: relative;
right: 40px;
border-right: 1px solid #245b7d;
height: 20px;
}
#navmenu li a:hover {
background: url(images/nav2.png) no-repeat;
text-decoration: underline;
}
#navmenu li a:active {
background: url(images/nav3.png) no-repeat;
}
I am going to concentrate on how to achieve what you want rather than how to fix what you have.
The issue is that you have given border-radius to the UL.
You could solve this one of a number of ways. One is to actually apply the default bg image to the LIs
Give ALL THE LIs top/left andbottom left/border radius. Apply the same to the A tags.
then LI +LI , LI+LI A { border-radius:none;}
OR you could also target the first LI /LI A by using #navmenu>UL >li:first-child OR #navmenu>UL >li:first-of-type OR just by giving it a class.
I tried what you suggested. I must have done something wrong. Can you please be a little more descriptive? I’m a newbie at this. Maybe show w/ my code i posted maybe. 
Could you post the HTML and CSS you currently have?
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"html://www.w3.org/TR/xhtm1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> - GreenPlumbing</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<link href="gpstyle.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/gplogo.png" class="logo"
width="540" height="80"
alt="BeGreenPlumbing logo"/>
<div id="tagline">
A good name is rather to be chosen<br/>than great riches. - Proverbs 22:1
</div> <!-- end of tagline div -->
</div> <!-- end of header div -->
<div id="navmenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="testimonies.html">Testimonies</a></li>
<li><a href="helpfulinfo.html">Helpful Info</a></li>
</div> <!-- end of navmenu div -->
<div id="bodycontent">
<h2>Home</h2>
<div id="main">
<p><h4>Plumbing Services You Can Count On Every Time!</h4></p>
<p>We are a small business that strives to give superb service. We have flat rates on many of our services. We have plumbers with many years in the business. Our rates are very competitive with our competition.</p>
<p>Whether you have a clogged drain, need a hot water heater or a complete remodeling project, Green Plumbing has got it covered.</p>
<p>Fair Pricing-Quality Work-Beautiful Results</p>
<p> We hope that with that first call you will never call another plumber again.</p>
</div> <!-- end of main div -->
<div id="widget">
<p><h3>What You Can Expect From Green Plumbing</h3></p>
<p><h4>100% SATISFACTION GUARANTEE</h4></p>
<p>You'll never be disappointed with our Service.</p>
<p>We guarantee you'll be pleased, no matter what it takes.</p>
<p><h4>Prices Quoted In Advance</h4></p>
<p>We'll give you the price, guarantee the price, and guarantee the work.</p>
<p>That way there are no surprises. That’s the way we do business.</p>
<p><h4>PROFESSIONAL SERVICE</h4></p>
You deserve the comfort and peace of mind that comes with having a professionally maintained system. We use only the finest quality products and the most skilled technicians. When you call Green Plumbing, you can be confident that you will have the most professional people in the plumbing service industry today.</p>
</div> <!-- end of widget div -->
</div> <!-- end of bodycontent div -->
<div id="footer">
<!-- end of "footer" div -->
</div> <!-- end of wrapper div -->
</body>
</html>
CSS
body {
background: url(images/linebg.png);
}
#bodycontent {
margin: auto;
width: 949px;
position: relative;
top: 70px;
background: #fff;
border-radius: 7px;
box-shadow: 0px 3px 5px #999;
}
#wrapper {
margin: 0 auto;
width: 949px;
}
p {
color: #000;
font-family: Big Caslon, Times, Georgia;
}
h2 {
font-family: Big Caslon, Times, Georgia;
padding: 20px 20px 0px 20px;
}
h3 {
color: #245b7d;
}
h4 {
color: #154D43;
}
///////* MENU */
#navmenu {
margin: auto;
}
#navmenu ul {
background: url(images/nav1.png) no-repeat;
float: left;
width: 949px;
position: relative;
top: 20px;
}
#navmenu li {
float: left;
list-style-type: none;
padding: 0px px 0px px;
}
#navmenu li a {
color: #fff;
text-shadow: #000 -1px 0px;
display: block;
padding: 10px 11px 10px 11px;
position: relative;
text-decoration: none;
font-size: 18px;
position: relative;
right: 40px;
border-right: 1px solid #245b7d;
height: 20px;
}
#navmenu li a:hover {
background: url(images/nav2.png) no-repeat;
text-decoration: underline;
}
#navmenu>ul >li:first-of-type {
border-bottom-left-radius: 7px;
border-top-left-radius: 7px;
}
#navmenu li a:active {
background: url(images/nav3.png) no-repeat;
}
//////* ADJUSTMENTS */
.logo {
position: absolute;
right: 300px;
top: 300px;
border: 2px solid #fff;
}
#tagline {
position: absolute;
right: 180px;
top: 50px;
font-family: Papyrus;
font-size: 21px;
font-weight: bold;
}
#widget {
position: absolute:
right: 700px;
width: 200px;
padding: 0px 10px 0px 10px;
border: 2px solid #C4C4C4;
border-radius: 4px;
margin: -339px 707px;
background: #F7F7F7 url(images/wh.png);
}
#main {
padding: 2px 0px 0px 20px;
width: 650px;
order: 1px solid red;
}
/////////* FOOTER */
#footer {
}
This is a basic way to approach it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
#wrapper {
margin: 0 auto;
width: 949px;
overflow:hidden;
}
ul#navmenu {
overflow: hidden;
list-style: none;
}
#navmenu li {
float: left;
padding: 0;
}
#navmenu li a {
color: #fff;
background: green;
text-shadow: #000 -1px 0px;
display: block;
padding: 10px 11px 10px 11px;
text-decoration: none;
font-size: 18px;
border-right: 1px solid #245b7d;
height: 20px;
}
#navmenu li a:hover {
background: blue none no-repeat;
text-decoration: underline;
}
ul#navmenu a.first {
border-radius: 7px 0 0 7px;
}
#navmenu li a:active {
background: red none no-repeat;
}
#main {
padding: 2px 0px 0px 20px;
width: 650px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="navmenu">
<li><a class="first" href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="testimonies.html">Testimonies</a></li>
<li><a href="helpfulinfo.html">Helpful Info</a></li>
</ul>
</div> <!-- end of wrapper div -->
</body>
</html>
Ralph pretty much described what i was saying (tho he opted for the method of ADDING A CLASS). Which, as I said, has the most backward browser support.
If you didn’t want to have to alter the markup, you also target your element as follows ( note this way you cont need to have : class=“first” in your HTML):
ul#navmenu li:first-child a {
border-radius: 7px 0 0 7px;
}
Another way ( which is supported all the way back to IE7)
#navmenu li,#navmenu li a {
border-radius: 7px 0 0 7px;
}
#navmenu li + li, #navmenu li +li a{border-radius:0; }
Of course one figure you cant be worried about IElt8 anyway, as it did not support rounded corners anyhow.
Thank you so much guys. 
It works now. I really appreciate it.