Geek Answers Handbook

Border-radius does not work in a modern native Android browser

I have a page that uses border-radius. It does not appear in the native Android browser; it appears with square corners. It appears on the desktop of Chrome, IE, FF, etc., but not in a normal browser. Does anyone know if this is a problem with the browser itself, some additional CSS extensions that I don't use, etc.?

Here is 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 installed JSFiddle: http://jsfiddle.net/VJvQA/

I tried with the addition, without filling, with the size of the box, without the size of the box, and it just appears like sharp corners. Any help or understanding will be appreciated.

I understand that someone published this already under ( border-radius style does not work in the Android browser ), but he did not provide any code, JSFiddle, and a general question was asked without an answer; I would let him down if I could, but I suggested that making the right well-written question would be better. Thanks!

+7
android css browser css3
source share
3 answers

It turns out this issue is specific to the Android browser on the Galaxy S4 and S4 Active. It seems like they broke support for the compressed border-radius property, but if you specify each corner individually, it works fine. I am sending an error message on 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 great; if you only have a border radius: 10 pixels; he is ignored.

This message was answered: Browser support with CSS3 support with Galaxy S4 support? I just repeat it here. But I tested their solution, and now it works great on the Galaxy S4 Active as well.

+17
source share

Unfortunately, some browsers simply do not support certain HTML5 and CSS3 features. My advice and general tips you find on the Internet is to design your site so that it works and looks good in all browsers, and then comes back and adds CSS3 and HTML5 elements as optional.

This is a well-designed and laid out table showing support for HTML5 and CSS3 in browsers , but it does not show support for mobile browsers.

This link shows mobile support.

+2
source share

I think that your code is not mistaken, it cannot display on tablet devices. the background border needs to fix this error, you must delete the lines

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

or delete line

 border: 3px solid red

I think this is not a mistake, and I did a lot of work as described above :) p / s: sorry, my English is not very good.

-one
source share

More articles:


All Articles