2

I have set rounded corners in CSS like this:

input { -webkit-border-radius: 1em; }

On desktop browser (Chrome, FF) the corners are rounded and pretty smooth (antialiased). However on Android browser (even 2.3) the corners are rounded but not smooth, they look pretty bad - pixelated...

If there is some CSS hack or some other solution, please help.

Frodik
  • 14,986
  • 23
  • 90
  • 141

2 Answers2

5

My experience (across all browsers) is that corners done with border-radius look better if they are an even number of pixels in size.

So border-radius: 10px; looks better than border-radius:9px;

My experience is mainly on desktop browsers, but I can see how this effect might be similar on mobiles.

I wonder if the size of your em unit is a different size between desktop and mobile?

It might be worth your while experimenting with a few different sizes (even pixel-based sizes, just for the experiment), to see what difference they make. It might be that a small change will make a big difference.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • You're right that there is difference between odd and even values for border-radius, but only slightly. I will experiment with the values more and if I see any improvement I will post it here. – Frodik Jun 22 '11 at 13:26
4

There is another solution (workaround) to improve borders and make them look smoother:

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

Adds a 1px wide (blured) shadow with 0 x,y coordinates, faking antialise on your box-rounded element.

To prevent this rule being targeted to all -webkit browsers (like desktop safari that alredy smoots well the borders) you could specific target the range of devices you need using media queries.

Wider answer on: Android WebView border-radius aliasing

Community
  • 1
  • 1
RDX
  • 165
  • 1
  • 9