Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Chrome not receiving CSS rounded borders

Chrome not receiving CSS rounded borders

Problem

I am having an issue getting Chrome to display my rounded corners on a drop down nav I have built from scratch. The rounded corners are displaying just fine in Firefox, but Chrome and IE9 don't seem to want to render my corners. I have changed my rounded corner call to the last

  • element in my drop down as well as the last which I have displayed as blocks with a width and height properties, but nothing seems to do the trick!

    So I figured I would post here to see if anyone can give me a nudge in the right direction.

    The site is still in early development, so don't worry about the redundant anchor links.

    My HTML:

    My CSS:

    nav {
        display:block;
        position:relative;
        width:980px;
        height:41px;
        background:url(../../images/nav_bg.png) center top no-repeat;
        margin:0 auto;
        border-bottom:2px solid #777;
        z-index:9998;
    }
    
    #mainNav {
        display:block;
        position:relative;  
        background:#fff;
    }
    
    #mainNav li {
        float:left; 
    }
    
    #mainNav li a {
        display:block;
        position:relative;
        width:125px;
        height:41px;
        overflow:hidden;
    }
    
    #mainNav li a.autos {
        display:block;
        position:relative;
        width:125px;
        height:41px;
        background:url(../../images/nav1.png) center top no-repeat;
    }
    
    #mainNav li a.autos:hover {
        background:url(../../images/nav1.png) center -41px no-repeat;
    }
    
    #mainNav li a.lifestyles {
        display:block;
        position:relative;
        width:125px;
        height:41px;
        background:url(../../images/nav2.jpg) center top no-repeat;
    }
    
    #mainNav li a.lifestyles:hover {
        background:url(../../images/nav2.jpg) center -41px no-repeat;
    }
    
    #mainNav li a.people {
        display:block;
        position:relative;
        width:125px;
        height:41px;
        background:url(../../images/nav3.jpg) center top no-repeat;
    }
    
    #mainNav li a.people:hover {
        background:url(../../images/nav3.jpg) center -41px no-repeat;
    }
    
    #mainNav li a.tech {
        display:block;
        position:relative;
        width:125px;
        height:41px;
        background:url(../../images/nav4.jpg) center top no-repeat;
    }
    
    #mainNav li a.tech:hover {
        background:url(../../images/nav4.jpg) center -41px no-repeat;
    }
    
    #mainNav li a.trends {
        display:block;
        position:relative;
        width:125px;
        height:41px;
        background:url(../../images/nav5.jpg) center top no-repeat;
    }
    
    #mainNav li a.trends:hover {
        background:url(../../images/nav5.jpg) center -41px no-repeat;
    }
    
    /* === Dropdown Menu Styles === */
    
    #mainNav ul {
        display:none;   
        position:absolute;  
        z-index:9998;
    }
    
    #mainNav li:hover ul {
        display:block;
        position:absolute;
        width:160px;
        height:auto;
        border-right:1px solid #999;
        border-left:1px solid #999;
        overflow:hidden;
    
        -moz-border-radius-topleft: 0px;
        -moz-border-radius-topright: 0px;
        -moz-border-radius-bottomright: 7px;
        -moz-border-radius-bottomleft: 7px;
        -webkit-border-radius: 0px 0px 7px 7px;
        border-radius: 0px 0px 7px 7px; 
    
        -webkit-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
        -moz-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
        box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25); 
    }
    
    #mainNav li:hover ul li a {
        display:block;
        width:160px;
        height:auto;
        background:#fff;
        padding:5px 0;
        border-bottom:1px solid #999;
    
        font-family: 'Swiss721Light', Verdana, Arial;
        text-indent:10px;
        text-decoration:none;
        font-size:14px;
        line-height:16px;
    color:#555;
    }
    
    #mainNav li:hover ul li a:hover {
        background:#eaeaea;
    }
    
    Problem courtesy of: robabby
  • Solution

    You could do it like this:

    #mainNav li:hover ul li:last-child a{
        border-radius: 0px 0px 7px 7px;     
    }
    

    You also need to get rid of the 40px padding-left on the containing ul

    Adding padding to the bottom is fine but makes it look a little messy especially if you are using borders around the individual links

    Solution courtesy of: Matthew Dolman

    Discussion

    View additional discussion.



    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    Chrome not receiving CSS rounded borders

    ×

    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription

    ×