Chrome not recieving CSS rounded borders?

Up vote 1 down vote favorite share g+ share fb share tw.

I am having an issue getting to 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 sight is still in early development, so don't worry about the redundant anchor links. My HTML: News Reviews Car Tech Fuel Economy & Safety Buying & Selling Everything Else Music Food Travel Shopping Everything Else Who You Know Who You Should Know Everyone Else Business Pleasure Everything Else Online Offline Everything Else My CSS: nav { dsplay: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; } html css html5 css3 link|improve this question asked Dec 23 '11 at 15:35stat30fbliss327 27% accept rate.

Here's a rough demo for anyone who want's to test. – FakeRainBrigand Dec 23 '11 at 15:44.

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.

That did the trick! – stat30fbliss Dec 23 '11 at 16:55 Glad it worked, if you are happy with the answer you can mark it off ;-) – Matthew Dolman Dec 23 '11 at 17:15.

Chrome and IE do not hide content that overflows the border radius. Your dropdown links are currently set to background: white; and the bottom one overflows the rounded border. Therefore, the white background of the link will be shown over the edge of the rounded border.

To fix this, you can remove the background of the link or add padding to the bottom of the dropdown. Another option would be to set the border radius of the last a in each dropdown. Change background: #mainNav li:hover ul li a { background: #fff; /* remove this line */ border-bottom: ... /* change to border-top */ } Padding: #mainNav li:hover ul { ... padding-bottom: 7px; }.

Thanks! Your suggested edits worked in IE9, but Chrome is still not responding. Though I have been having tons of issues with Chrome holding onto the Cache.

– stat30fbliss Dec 23 '11 at 16:20 That's strange, I am using Chrome and it is working fine. What is happening? Is the link still overflowing the border?

– William Van Rensselaer Dec 23 '11 at 16:27 I'm not sure. Considering I moved the background from the #mainNav li:hover ul li a to the #mainNav ul, I don't see any reason why Chrome shouldn't be rendering the border radius. Even if I change the border radius from #mainNav li:hover ul to the higher #mainNav ul which is at display:none, the borders render in IE and Firefox, but not Chrome.... – stat30fbliss Dec 23 '11 at 16:50 Did you change the border-bottom to border-top?

– William Van Rensselaer Dec 23 '11 at 16:56 Yes I did. I combined your suggested edits with Matthew Dolman's #mainNav li:hover ul li:last-child a, and that did the trick – stat30fbliss Dec 23 '11 at 17:22.

It's an overflow problem.. all elements inside the rounded box need the same border radius jsfiddle.net/pixelass/KZXnT/ #mainNavli > ul > li. Last, #mainNav > li ul > li. Last a { -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; }.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.