title: border radius ugly rendering on Android 4.0.3
body: <p>I'm developing a simple app with Cordova/PhoneGap and using FontAwesome (and border-radius) to display some social media icons. I made the build via <code>cordova android build</code> on the CLI.</p>
  
  <p>The social media icons look neat and crispy on an Android 4.4.2.</p>
  
  <p>But on an Android 4.0.3 tablet, as well as on my colleague Android 2.3.6 smartphone, it looks bad, like in <a href="https://www.dropbox.com/s/885vg7ibl403gqt/social-media-icons.jpg" rel="nofollow">this screenshot</a> (from the tablet).</p>
  
  <p>The border radius is awfully rendered, but the FontAwesome icons also look bad.</p>
  
  <p>Why? Should I avoid using FontAwesome and/or border-radius in Cordova/PhoneGap applications for older Android devices? How could I serve better images on these devices? </p>
  
  <p>What I'm doing right now with other images is using media queries:</p>
  
  <pre><code>@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5){
      #logo-home { width: 32px; height: 32px; background: url('../img/logo-home64x64.png'); background-size: 32px 32px; }
  }
  </code></pre>
  
  <p>You can notice I'm actually loading a 64x64px image and setting it's dimensions to 32x32px. Is that a good practice? </p>
  
  <p>Thank you</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here's a comparison between two PNG screenshots (the one from the link above is a JPEG that might be a bit compressed) from my Android 4.0.3 device (Galaxy Tab GT-P3100):</p>
  
  <p><a href="http://res.cloudinary.com/dmxkidzrn/image/upload/v1401113664/icons-1_i7m7ht.png" rel="nofollow">image 1</a> - these are FontAwesome icons and border-radius</p>
  
  <p><a href="http://res.cloudinary.com/dmxkidzrn/image/upload/v1401113664/icons-2_t4pqt4.png" rel="nofollow">image 2</a> - these are PNG images</p>
  
  <p>The PNG icons are a bit smaller and the icons aren't exactly the same, but you can see a drastic difference between them.</p>
  
  <p>Why the border-radius rendering quality is so poor? Regarding the icons, it's actually only the YouTube FontAwesome icon that looks ugly.</p>
  
  <p>CSS for the FontAwesome icons with border-radius:</p>
  
  <pre><code>.social                     { margin: 0 auto; }
  .social .item               { margin: 3px; text-align: center; font-size: 24px; cursor: pointer; display: inline-block; width: 44px; height: 44px; background-color: #68a225; color: #fff; border: solid 1px #fff; border-radius: 22px; }
  .social .item:hover         { background-color: #fff; color: #68a225; border: solid 1px #68a225; margin-top: 0;} 
  .social .item i             { margin-top: 12px; }
  </code></pre>