How to remove iPhone <button> styling?

Question

http://ingoodtastemag.com/

On an iPhone, the button is round with a gradient. However, on every other desktop browser and Android that we've tested so far, it is square. I want the button to stay square. What CSS resets do I need for this?

Solution 1

This rounded corner is the default property of the Safari browser and iOS 5 devices. To overwrite it, use the following styling for your button:

-webkit-appearance: none;
border-radius: 0;

Solution 2

To keep your own border radius while removing the iOS styling

-webkit-appearance: none;
-webkit-border-radius: none;
border-radius: 10px;

You must remove webkit's border-radius to get your own style back, but you can still add your own border-radius after you remove theirs.

Comments

[jemiloii]

the -webkit-appearance none helped remove the gradient