border-radius not working in modern native Android

Question

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!

Answer 1

Unfortunately, some browsers just don't support certain HTML5 and CSS3 properties. My advice and the general advice you'll find on the web is design your site so that it functions and looks nice across all browsers, and then go back and add CSS3 and HTML5 elements as an extra.

This is a well designed and laid out table showing HTML5 and CSS3 support across browsers, it doesn't, however, show the support for mobile browsers.

This link, shows support for mobile devices.

EDIT 2019-11-07

With HTML5 and CSS3 widely supported across all modern browsers dating back several years, plus many JavaScript plugins designed to provide polyfills should you need to support much older browsers, this question and my original answer are both severely outdated.

On that note, it's pretty amazing how far we've come in just 5 or so years :)

New answer: HTML5 and CSS3 all the things!

Answer 2

I think your code is not wrong, it can not display on tablet devices by do. background border should have to fix this error you should delete the lines

background-color: #521c0b; 
color: #FFFFFF;

or deleting row

border: 3px solid red

I think this is not a bug and I've met a lot of work as above :) p / s: sorry my english is not very good

Answer 3

I see this on another topic.

and to work on mobile just do this:

border-collapse: separate;

with border-radius (im also try border-radius separated)

border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-collapse: separate;

Tell me if works. Cya

Answer 4

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.