Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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):

.bigButton2
{
    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!

like image 856
HBlackorby Avatar asked Jul 31 '13 14:07

HBlackorby


1 Answers

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.

like image 128
HBlackorby Avatar answered Oct 13 '22 01:10

HBlackorby