HBlackorby HBlackorby - 7 months ago 71
CSS Question

border-radius not working in modern native Android browser

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;
padding: 20px;
background-color: #521c0b; color: #FFFFFF;
border: 3px solid #e3b21e;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;

I've set up a JSFiddle: http://jsfiddle.net/VJvQA/

I have tried with padding, without padding, with box-sizing, without box-sizing, and it just shows up as sharp corners. Any help or insight would be appreciated.

I realize that someone posted this already under (border-radius style doesn't work in android browser), but he didn't provide any code, JSFiddle, and it was incorrectly answered with a general question without any real answer; I'd downvote it if I could, but I assumed prodviding an actual well-written question would be better. Thanks!


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.