Search code examples
htmliphonemobile-safaricss

Why doesn't border-radius work properly on text inputs in MobileSafari?

Here is a reference HTML document:

<!DOCTYPE html>
<html>
    <head>
    <style>
body { background-color: #000; }
input { -webkit-border-radius: 20px; }
    </style>
    </head>
    <body>
        <input type="text" value="text" />
    </body>
</html>

The border-radius renders fine on Safari/WebKit-based desktop browsers, but on the "MobileSafari" variant, namely the iPhone and iPad browsers, it renders with this strange box, which destroys the illusion of rounded corners when the input is being displayed on top of a differently-colored background.

Solution

  • Consensus from around the web is that this is a bug in WebKit for iOS. Don't use border-radius on text inputs on the iPhone.