iPhone Safari CSS styling issues

[kevadamson]

I have been trying to add border-radius to a <button> tag for a mobile version of a web site I am working on. For branding purposes the buttons need to have rounded corners and flat colours - green and grey.

When I tested my pages on an iPhone the buttons were flat in colour but had no rounded corners.

So I then replaced all buttons with input tags (type=button/submit), and the colour was applied, as were the rounded corners, BUT a ghastly gradient from light to dark was applied.

I then set -webkit-gradient to one colour stop which fixed the colour, but removed the border-radius.

All displays fine in Safari on Mac/Win from the off. Am I missing something here? Will border radius work on the button element for iPhone Webkit in the future? Is this a bug or is there a reason it seems to be teasing me?

[viefeld.net]

i had the same issue and it took me some time, searching the net for a way out.

finally, i found a solution:
-webkit-appearance:none;
-webkit-border-radius: 0px;

the first tag deactivates the webkit-stuff, and after that you can style your element the way you want to ...

works fine on my iphone safari 3.x
have fun