Question

is there a workaround to improve border-radius on Android browser ?

I searched and searched finding more questions about this argument or finding only “not possible for now” answers so I came up with a simple maybe solution I’d like to share.

Answer 1

I needed 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;

The x and y position of the shadow are 0 so the shadow is centered, all wee need is to adjust the blur value expanding it just 1px (in base of need) above the corner edges making them look smoother. Of course the shadow color must be the same as your rounded element’s background/border-color…

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.

Now, if you are the type of designer that can use small compromises, it should just work for you like this, but if you are a finicking freak like I am, you should absolutely find a way to target your CSS to specific devices.

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 preventing 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 😉