[Solved] Why is Chrome showing rounded corners?

[doylegirl]

Hello all,

I am building this site for a client. When in Chrome, and you click the login link in the top right corner, it shows rounded corners on the drop down box that appears. I have radius-boder set to 0px !important everywhere. Can anybody help me with this? Thanks.

Here is a page you can view it on:
http://fnbsf.henkinschultz.com/about-us/

[doylegirl]

Yes, actually I forgot it is even the one on the home page that shows rounded corners too (just on the drop down menu). I am using Chrome Version 38.0.2125.122 and it says I am up-to-date. I have cleared my cache several times. The client is also seeing rounded corners. It’s something they really want me to fix. I appreciate you troubleshooting this for me. It’s probably hard to help when you don’t see the problem. :) Thanks though bearhead.

[Paulie_D]

Ditto…cannot reproduce

Chrome Version 39.0.2171.62 beta-m (64-bit)

W7

[Tom]

Can’t reproduce it either with Chrome 39.0.2171.65 m on W7.

[Chris House]

Ditto here. Chrome 39. It’s very likely a cache issue.

[doylegirl]

Okay, I have had caching issues before with this Mac. I will have the client view it on another computer that hasn’t been on the site at all. Not sure how to add screenshots to this forum. I am new to it, and thank you all for your help.

[doylegirl]

Could this also be User Style Sheet issue that is causing the rounded corners? I also see rounded corners in Safari.

[Paulie_D]

Could this also be User Style Sheet issue that is causing the rounded corners?

You mean the Safari default styles?…it’s possible but unlikely.

However, if you’re seeing them you should be able to inspect them with DevTools in Safari and see where they are coming from.

[Paulie_D]

Not sure how to add screenshots to this forum

No-one doubts that you are seeing them so images aren’t really helpful.

As we can’t reproduce the issue so it’s hard to help other than give you places to look.

[Paulie_D]

Just one thing….

It looks like there is some bootstrap styles that, although they don’t apply for me in Chrome, might be the root issue

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
display: inline-block;
height: 20px;
padding: 4px 6px;
margin-bottom: 10px;
font-size: 18px;
line-height: 20px;
color: #555;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
vertical-align: middle;
}

This is on Line 600 of your Bootstrap CSS…you might want to comment out the border-radius declarations temporarily, clear all the caches and see if that’s it.

If not, you can uncomment them again and look elsewhere.

[doylegirl]

I commented that out in the bootstrap. Still shows rounded corners. I did find a fix though
-webkit-appearance: none;

-But the drop down triangle disappears too. So I guess it is the client’s choice!
Thanks for all the help/ideas!

[Author]

Posts