First and Last Child Border Radius not working

Question

I have the following selectors on my menu to apply a border radius to the first and last child of my menu

.main-nav ul li a:first-child {border-radius: 6px 0 0 6px!important;}
.main-nav ul li a:last-child {border-radius:  0 6px 6px 0!important;}

I even tried the !important addition to try and force this on, however it is not working and I can't see where it would be overridden, can anyone please advise how to get round this?

This the site.

score 3 · Accepted Answer · answered Sep 29 '13 at 20:51

In your style sheet you have:

.main-nav ul li {
    float: left;
    background-color: #58585a; //remove this
    color: #ffffff;
}

Remove the background-color line from .main-nav ul li. It's showing under your menu items so you can't see the border radius.

score 0 · Answer 2 · edited Sep 29 '13 at 20:42

0

Try this instead:

.main-nav ul li:first-child a {
    border-radius: 6px 0 0 6px!important;
}
.main-nav ul li:last-child a {
    border-radius:  0 6px 6px 0!important;
}

edited Sep 29 '13 at 20:42

GreyRoofPigeon

17,833
4
36
59

answered Sep 29 '13 at 20:04

Juraj Gibanjek

1
1

select everything below the first line and hit `ctrl-k` and save – Bleeding Fingers Sep 29 '13 at 20:42

Alessandro Minoccheri · Answer 3 · 2013-09-29T20:10:59.287

0

Styles are applied to li element not to a element

try this:

.main-nav ul li:first-child {border-radius: 6px 0 0 6px!important;}
.main-nav ul li:last-child {border-radius:  0 6px 6px 0!important;}

edited Sep 29 '13 at 20:10

answered Sep 29 '13 at 20:05

Alessandro Minoccheri

35,521
22
122
171

nope this doesnt appear to be working :( somethings overridding it somewhere and i have no idea where – Kirsty Marks Sep 29 '13 at 20:08

First and Last Child Border Radius not working

3 Answers3

Linked