I have a page that uses border-radius. It doesn't show up rounded in the native Android browser; it shows up with square corners. It shows up rounded in desktop Chrome, IE, FF, etc fine, but not in the native phone browser. Does anyone know if this is a problem with the browser itself, some additional CSS extension that I'm not using, etc?
Here's my CSS (in the demo):
width: 320px; height: 200px; margin: auto;
background-color: #521c0b; color: #FFFFFF;
border: 3px solid #e3b21e;
Turns out, this issue is specific to the Android browser on the Galaxy S4 and S4 Active. It looks like they've broke support for the condensed border-radius property, but if you specify each corner individually, it works fine. I'm posting a bug report to Android. So, if you do this:
border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
It works fine; if you just have border-radius: 10px; it gets ignored.
This was answered under this post: Galaxy S4 stock browser CSS3 border-radius support? I'm just repeating it here. But I did test their solution, and it is working fine now on the Galaxy S4 Active as well.