Styling a Separator Nav with round edges stricly in CSS - css

Question

My navbar looks like:
<div id="navbar">
<ul class="tabnavcenter">
<li class="active">Test</li>
<li class="aaron">Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
And my CSS for the NavBar looks like:
ul.tabnavcenter {
background: #fff;
padding:0px 0px;
font-size:14px;
font-weight:bold;
color:#000;
overflow:hidden;
width:957px;
background-image: -moz-linear-gradient(top, #cacaca, #848484);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}
ul.tabnavcenter li {
float:left;
border-right: #DDDDDD 1px solid;
list-style-type:none;
}
ul.tabnavcenter li.active {
background-image: -moz-linear-gradient(top, #cacaca, #4B4B4B);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#4B4B4B));
}
ul.tabnavcenter li:hover {
background: #7D7D7D;
cursor:pointer;
}
Is there a possible way I could add rounded edges to the first and last link just using CSS? :)

Answer 1

I put your code into a JS Fiddle but it's not apparent how you want to handle the last link (because of the gradient to the right, a rounded edge would look strange).
http://jsfiddle.net/Kk7vK/
Is there a possible way I could add rounded edges to the first and
last link just using CSS?
First/last can be selected using :first-child and :last-child. Browser support is good (IE7+) for first-child, not so good (IE9+) on last-child.
Example
ul.tabnavcenter > LI:first-child{ /* do something different */ }
CSS Selector Reference: http://www.w3.org/TR/selectors/
Rounded edges can be achieved using border-radius (with vendor-specific prefix(es) such as -moz-border-radius). Internet Explorer support for border-radius started with IE9 (though there are polyfills for < IE9).