Why doesn't border-radius work properly on text inputs in MobileSafari?
Posted
by abrahamvegh
on Stack Overflow
See other posts from Stack Overflow
or by abrahamvegh
Published on 2010-06-10T17:01:25Z
Indexed on
2010/06/10
17:12 UTC
Read the original article
Hit count: 378
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.
© Stack Overflow or respective owner
