title: CSS Border Radius not working on iOS
body: <p>I'm having some trouble with borders on iOS (safari).</p>
  
  <p>I have an image (my gravatar) which I want to give a round border which is 10px solid and white.</p>
  
  <p>To achieve this I have the HTML</p>
  
  <pre><code>&lt;img src="http://2.gravatar.com/avatar/b7c2d49748426791dc98b8214dfac9d1?s=500" class="img-circle" height="300" width="300"&gt;
  </code></pre>
  
  <p>and the CSS</p>
  
  <pre><code>.img-circle {
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
  border: solid 10px white;
  }
  </code></pre>
  
  <p>JSFiddle <a href="http://jsfiddle.net/2UT8v/2/" rel="noreferrer">http://jsfiddle.net/2UT8v/2/</a></p>
  
  <p>I'm using twitter's bootstrap and so the border-radius is being specified by their class .img-circle (that is why the radius is 500px) and then I've added the border weight and color.</p>
  
  <p>This works well on a desktop browser (Chrome) but when viewing on iOS (safari on my iPad) it shows the 10px solid white border is still a square around the original image and the radius is applied after and so cuts off some of the border.</p>
  
  <p><img src="https://i.stack.imgur.com/bzJqQ.png" alt="Border In Chrome"><img src="https://i.stack.imgur.com/xNzzn.png" alt="Border In iOS"></p>
  
  <p>Does anybody know how I can get the border to follow the radius in iOS?</p>