css - Android WebView border-radius aliasing

Question

When using border-radius on my android emulator I am seeing ugliness like this:

ugly border radius http://beautifulpixel.com/assets/5554_FastAndSmall-20100726-130326.png

Is there anyway to get Android to display rounded corners via -webkit-border-radius in a more pleasing way? Most modern desktop browsers and Mobile Safari seem to antialias their corners, but not Android's renderer.

I'm really hoping I don't have to do this with images, and there is some awesome trick to get pretty corners with only a border radius css declaration.

Answer 1

I indeed absolutely needed too some trick to make the border-radius look smoother on the android browser so I come up with this simple yet effective solution. I just added box-shadow as shown below to my css class:

-webkit-box-shadow: 0 0 1px #000;

There is a small issue just adding this line of code to your css: yes… it will target all -webkit browsers, making the border-radius look ( slightly ) less sharper.

At the time I’m writing this I didn’t thinked yet at the perfect solution, but you can make good use of media queries limiting the rule wether you use the ‘max-width’ property (to limit the range of devices based on their screen width at least spearing webkit desktop browsers) or the ‘-webkit-device-pixel-ratio’ to target the different android devices based on their pixel density:

@media only screen and (-webkit-device-pixel-ratio:.75){
/*for low density (ldpi) Android layouts */
}

@media only screen and (-webkit-device-pixel-ratio:1){
/*for low density (ldpi) Android layouts */
}

@media only screen and (-webkit-device-pixel-ratio:1.5){
/*for low density (ldpi) Android layouts */
}

Best regard and good designing to everybody. Hope I helped some desperate android border-radius obsessed designer like me too ;)