[ACCEPTED]-Rounded corners on First and Last <li> item-css

Accepted answer
Score: 10

You have a background color set on the li 17 but you're rounding it's child element's 16 border. Since the li has the background-color 15 applied to it, you need to round its corners 14 and not the li's child. Also, if you want 13 that element to always have rounded corners, you 12 don't need to apply the .current-menu-item 11 class. So that part of your code should 10 look like this:

header .nav li:last-child{                                
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;                

    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;                 
}

It should be the same for 9 the first-child. Except of course you need 8 to change the properties from right to left. This 7 will apply the rounded corners at all times 6 regardless of whether or not the li is the 5 current item. If you want to change the 4 border radius for the current item you need 3 to redefine that property later on in the 2 stylesheet. Otherwise it will stay exactly 1 the same.

Score: 1

Here is a simple example of what you are trying 1 to accomplish.

li{display:inline;}
li a{display:inline-block; padding:20px; background:red;}
li:first-child a{border-top-left-radius: 10px; border-bottom-left-radius: 10px;  }
li:last-child a{border-top-right-radius: 10px; border-bottom-right-radius: 10px;  }
li a:hover,li a.active {background: salmon;}
Score: 1

Here's a JSfiddle with 2 examples: http://jsfiddle.net/9YtfT/

The 23 first horizontal list rounds the corners 22 of the LI. The second uses the A tag as 21 the border and rounds them.

Depending on 20 your browser (I think it's a Firefox thing) but 19 rounding the borders of the LI tag can have 18 an effect when there's a background color 17 of a block level child (ie. the A tag). So, to 16 get a cleaner effect, it would be better 15 to round the A tag.

But there's an example 14 of both.

UPDATE

@Stephen The CSS is failing 13 because of this selector:

.nav li:first-child .current_menu_item{
...
}

The selector is 12 looking for a child element inside of the first 11 LI tag with a class called "current_menu_item". Your 10 HTML puts this class on the LI tag, not beneath 9 it.

To fix your css, you need to remove the 8 space.

.nav li:first-child.current_menu_item{
...
}

This tells the browser to find the 7 first-child LI with that has a class "current_menu_item". I 6 think that will work. Of course, it begs 5 to ask, if you're trying to round the first 4 child, why are you targeting the "current_menu_item" class? You 3 can remove it all together.

.nav li:first-child{
...
}

UPDATE 2

I updated 2 the JSFiddle to include class names to give 1 a closer example to Stephen's situation:

http://jsfiddle.net/9YtfT/3/

More Related questions