[ACCEPTED]-border-radius not applying to ul element?-border

Accepted answer

Score: 17

You need to specify a border property and/or 5 a background color, otherwise you won't 4 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 3 is not inherited, so if you're expecting 2 the actual li's to have the rounded border, you'll 1 have to set it there.

Score: 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 6 only applied certain border styles here.) Kip, you 5 were correct, since the UL had no border 4 set there was nothing to set a border-radius 3 on, but I didn't notice that the border 2 is actually set on the LIs - thus it's those 1 that want rounding.

Score: 2

Or you can apply border radius with and 1 and give them the same background color

ul.navigation, ul.navigation li {    
    background-color: #CCC;
    -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;
}

Score: 1

you can also add overflow: hidden; property to your ul element, so 2 the children elements will not be visible 1 outside of ul

Source: stackoverflow.com

[ACCEPTED]-border-radius not applying to ul element?-border

css border-width percentage

What is a good way to write CSS for multiple borders?

Is there any way to make the HTML underline thicker?

CSS ul li: Avoiding double borders

How to create multiple columns in a div

Strange border on IMG tag

Removing the image border in Chrome/IE9

Can you assign an image to border-right?

<tr>-borders doesn't appear in outlook

4 gradient borders in CSS