border-radius not applying to ul element?

Question

I've got the following CSS code, but the -moz-border-radius and -webkit-border-radius styles aren't being applied to the UL. Is there something obvious I'm missing as to why, or does -border-radius not support UL elements?

ul.navigation { 
    margin-top: 7px;
    margin-bottom: 10px;
    list-style-type: none;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

ul.navigation li a {
    text-transform: uppercase;
    text-align: left;
    font-size: 13px;
    padding: 8px;
    display: block;
    border: 1px solid #375D81;
    margin-top: -1px;
    color: #183152;
    background: #ABC8E2;
    text-decoration: none;
}

Also, should I also be applying border-radius at the moment for future CSS3 compatibility?

Answer 1

Yes you should add border-radius The lis have backgrounds who overlap the radius.

Answer 2

You need to specify a border property and/or a background color, otherwise you won't see the rounded border:

ul.navigation { 
    margin-top: 7px;
    margin-bottom: 10px;
    list-style-type: none;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;

    /* Added the following two properties to display border */
    border: 2px solid red;
    background-color: green;
}

Also, the border-radius is not inherited, so if you're expecting the actual li's to have the rounded border, you'll have to set it there.

Answer 3

I was looking at the problem wrong.

ul.navigation {
    margin-top: 7px;
    margin-bottom: 10px;
    list-style-type: none;
}

ul.navigation li a {
    background: #ABC8E2; 
    text-transform: uppercase;
    text-align: left;
    font-size: 13px;
    border: 1px solid #375D81;
    margin-top: -1px;
    padding: 8px;
    display: block;
    color: #183152;
    text-decoration: none;
}

ul.navigation li:first-child a {    
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
}

ul.navigation li:last-child a { 
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

(I've only applied certain border styles here.) Kip, you were correct, since the UL had no border set there was nothing to set a border-radius on, but I didn't notice that the border is actually set on the LIs - thus it's those that want rounding.