border-radius style doesn't work in android browser

Question

I created a website, which I intend to display in some mobile devices. The thing is that I have created several menu options as circles.

To achieve this effect I use border-radius in a style sheet, and -webkit-border-radius and-moz-border-radius too.

On the computer it looks well in the browsers I have (firefox and chrome), but when I move to the android browser, these circles are reset to be square divs. This occurs since the load of the page.

may I use other special style for android? Could I need something like the jQuery mobile?

In short I will put the code, but if anyone has gone something like, could share that information, please? thanks

Answer 1

See this post for the answer: Galaxy S4 stock browser CSS3 border-radius support?

Just use the expanded border-left-radius, border-right-radius, etc as a workaround; it's a glitch in the new Android 4+ browser; a bug report has been submitted.

Answer 2

Hi I am using this for gradient. And this works fine in most of the browsers.

`background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#B4DCFA), to(#FF0000));
-webkit-border-radius:11px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.8);   
/* For WebKit (Safari, Google Chrome etc) */
/* For Mozilla/Gecko (Firefox etc) */
/* For Internet Explorer 5.5 - 7 */
/*-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B4DCFA,   endColorstr=#FF0000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B4DCFA), to(#FF0000));
`

Can you please post the code?