CODEWITHSUNDEEP
css
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70466

css border-radius is not applied

CSS border radius is not applied on navigation wrapper. Any ideas why?

Fiddle

Code:

HTML:

<div class="navigation">
    <div><a href="">Home</a></div>
    <div><a href="">Products</a></div>
    <div><a href="">Services</a></div>
    <div><a href="">Support</a></div>
    <div><a href="">Contact</a></div>
</div>
<div style="clear:both;"></div>

CSS:

.navigation {   
    position:relative;
    float:left;

    overflow:auto;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.navigation div {
    position:relative;
    float:left;

    background: #484745;

    height:53px;
    line-height: 53px;
}

Upvotes: 0

Views: 1468

Answers (2)

sandeep
sandeep

Reputation: 92863

Give background-color to .navigation. Write like this:

.navigation {    
    background: #484745;
}

Check this: jsFiddle

Upvotes: 3

Vukašin Manojlović
Vukašin Manojlović

Reputation: 2743

Problem is with your background. Your divs' background hide border radius of .navigation. Just add background to .navigation (see http://jsfiddle.net/nDEmS/18/)

Upvotes: 1

Related Questions