Border-radius with percentage value not supported in Android Browsers

android, browser-support, css, html

Solution

Yes there is: check here, and click on known issues.

Here's what it says:

1. Android Browser 2.3 does not support % value for border-radius.

2. Border-radius does not work on fieldset elements in IE9.

3. The stock browser on the Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property but does support the long-hand properties for each corner like "border-top-left-radius".

What are you using the percentage value for? Please tell us, so we can further help you.

Now, since you are using it to make circles, there's a dirty hack you can use:

#circle {
  border-radius: 9999px; /* makes it a circle */
}

That should work fine.

Problem

Is there a known issue using % values in border radius on Android browsers? I notice that when I use: ``` .element { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } ``` The border radius seems to work on all mobile browsers, but when I use: ``` .element { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } ``` The border radius does not apply on Android browsers.

Original source