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

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.