Question

I’m trying to make a horizontal menu with CSS but i’ve run into a roadblock. What I’m trying to accomplish is to have the first link bblock and last link block have rounded corners using css3. I’ve managed to make the menu but I’m unable to achieve the desired affect.

I tried styling those individual list items but the effect doesnt show. I’m attaching my css and html for someone to look at. Any pointers would be appreciated

<ul id="nav">
<li style="-moz-border-radius-topleft: 5px;-moz-border-radius-topright: px;-moz-    order-radius-bottomright: px;-moz-border-radius-bottomleft: 5px;-webkit-border-radius: 5px px px 5px; border-radius: 5px px px 5px;"><a href="#" style="line-height:48px;">Home</a></li>
<li><a href="#" style="line-height:48px;">About Us</a></li>
<li><a href="#" style="line-height:48px;">Services</a></li>
<li><a href="#" style="line-height:48px;">Events</a></li>
<li><a href="#" style="line-height:48px;">Gallery</a></li>
<li><a href="#" style="line-height:48px;">Testimonials</a></li>
<li><a href="#" style="line-height:48px;">Contact</a></li>
</ul>

#nav {
  margin-left: 9px; 
  padding:0; 
  margin-top: 30px; 
  margin-bottom: 10px; 
  list-style:none; 
  clear:both ;   
}   
#nav li {
  float:left; 
  display:block; 
  width:139px; 
  position:relative;
  z-index:500; 
  margin:0 0; 
 border-left: 1px solid #5d564e;
}
#nav li a {
  display:block; 
  padding:8px 5px 0 5px; 
  font-weight:500;  
  height:50px; 
  text-decoration:none; 
  background: #333; 
  color: #fff; 
  text-align:center; 
  border-left: 1px solid #000; 
}
#nav li a:hover {
  color:#fff; 
  background: #3e7e99; 
  text-decoration:underline;  
}
#nav a.selected {color:#f00;}

Answer 1

Here’s a jsfiddle using css3 to round the outside corners of the first and last items in the list – if I understand what you’re trying to accomplish correctly.

One thing I’d add too is that moving your css from inline with the elements to a <style> section or even better a css file is preferable.