Curved corners with CSS

Question

I have a simple navigation Bar and some styling with CSS already.

The nav Bar will have a white border on along the top for the inner links.

For the two outer links I want there to be a border on the left for the left link and on the right for the right link and also curved corners but i don't know how to focus the CSS on just these two li's.

I tried to give the li an id of home but that didn't work

i'v also tried putting the curved corners code in the ul and the NavBar tags. Here is wht I have tried

<div id="NavBar">
<ul>
<li id="Home"><a href="Index.php"><strong>Home</strong></a></li>
<li><a href="AboutUs.php"><strong>About Us</strong></a></li>
<li><a href="Products.php"><strong>Products</strong></a></li>
<li><a href="Policies.php"><strong>Policies</strong></a></li>
<li id="ContactUs"><a href="ContactUs.php"><strong>Contact Us</strong></a></li> 
</ul>

And this is the CSS which i have tried to focus on the one li home.

#NavBar li {
   margin:0;
   padding:0;
   list-style:none;
   float:left;
   position:relative;
   border:solid 3px #FFF;
   border-bottom:0px;
   width:20%;

   }
#NavBar li Home {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    border:solid 3px #FFF;
    border-bottom:0px;
    width:20%;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;

     }

Thanks for any help

Created a JSFiddle: https://jsfiddle.net/b4ejndkz/

Answer 1

If you're going to use width:20% and specify a border width, you'll need box-sizing:border-box;, that way it'll take into account the border size when determining total width. Otherwise it'll split off into 2 lines like it is at the moment.

Then you can set a specific corner to apply a border radius on by doing: border-radius: 5px 0 0 0; (top left, top right, bottom right, bottom left).

You could do it with id selectors https://jsfiddle.net/b4ejndkz/2/... or instead use the CSS selectors :first-child and :last-child to select your first and last elements of your list:

#NavBar li {
   box-sizing:border-box;
   margin:0;
   padding:0;
   list-style:none;
   float:left;
   position:relative;
   border:solid 3px #FFF;
   border-bottom:0px;
   width:20%;
}

#NavBar li:first-child {
    border-radius: 5px 0 0 0;
}

#NavBar li:last-child {
    border-radius: 0 5px 0 0;
}

https://jsfiddle.net/b4ejndkz/1/

Answer 2

Use :first-child and :last-child.

To access only the first or last element of your list, do something like this:

ul li:first-child {
    Styles for first element
}

ul li:last-child {
    Styles for last element
}

With that, you can apply the needed styles to the matching links.