Hi I would like some help im struggling to round the corners of just the far right li element and the far left li element.
I have had a look at other peoples questions they have posted but Im struggling to understand and apply it to my code.
what im trying to do is round the top left corner of id topnavleft and rounding the top right corner of topnavright.
heres my html
<div id="navmenu">
<ul id="list-nav">
<li id="topnavleft"><a href="index.html">Home</a></li>
<li><a href="design.html">Design</a></li>
<li><a href="about.html">About</a></li>
<li><a href="kayaking-di">kayaking Disciplines</a></li>
<li id="topnavright"><a href="links.html">Useful links</a></li>
</ul><!-- ul end list-nav -->
</div><!-- div end navmenu -->
and heres the css
#navmenu {
width : 980px;
margin-left : auto;
margin-right : auto;
height: 33px;
}
ul#list-nav {
list-style : none;
padding : 0;
width : 980px;
height : 33px;
background-color : #656565;
font-family:Tahoma, Geneva, sans-serif;
margin-top : 0;
font-style:normal;
font-size:14px;
}
ul#list-nav li {
display : inline;
width : 980px;
height : 33px;;
background-color : #656565;
}
ul#list-nav li a {
text-decoration : none;
padding : 8px 0;
width : 196px;
background : #656565;
color : #eee;
float : left;
text-align : center;
}
ul#list-nav li a:hover {
background : #999;
color : #fff;
font-family:Tahoma, Geneva, sans-serif;
}
ul#list-nav li a:active {
background : #999;
color : #fff;
font-family:Tahoma, Geneva, sans-serif;
}
#container #navmenu #list-nav #topnavright {
border-radius:25px;
}
#container #navmenu #list-nav #topnavleft {
border-radius:25px;
}
You can do this with specific selectors for last and first child:
On the property
border-radius
you can set an specific value for each corner like this:Where the values are:
Then if you already have
id
for the specific li you can try this: You also need to set the border-radius for the a tag and general container/The demo http://jsfiddle.net/q5FJy/9/
Edit
You also can set the border-radius only for the main container but hidden the overflow:
New demo http://jsfiddle.net/q5FJy/11/