Confusing issue with border radius in css

[newedgemarketing]

I'm re styling my blog part of which is to add border radius to my input fields, buttons etc - easy you might think!

This is the css I'm using:
input,
select,
textarea {
background-color: #dddddd;
border: 0px solid #ddd;
border-radius: 3px;
box-shadow: 0px 0px 0px #eee inset;
color: #999;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 16px;
padding: 14px;
width: 100%;
}

Now when i check this in Firefox i have rounded corners on my input fields etc BUT in Chrome and what seems to be every other browser i still have non rounded sharp corners ie a border radius of 0 even though in inspect element the css shows a border radius of 3px

I've included an image of what i'm seeing in my browsers:
http://www.newedgemarketing.co.uk/wp-content/uploads/2015/09/rounded-courners.png

on every browser except firefox the border radius is 0px despite what inspect element says

http://www.newedgemarketing.co.uk/wp-content/uploads/2015/09/rounded-courners.png

[Susan]

I am closing this, as you have marked it resolved. If you are still having issues, please go ahead and start another thread.

[Author]

Posts