title: Image with border radius + border color not working on Chrome/Safari iOS
body: <p>I'm trying to work out why an image with a circle border radius and a white border color isn't working on Chrome/Safari on iOS. It works on my desktop.</p>
  
  <p>Here is a screenshot of what it looks like, along with my HTML/CSS:</p>
  
  <p><strong>Screenshot:</strong> <a href="http://i46.tinypic.com/29z61c4.jpg" rel="nofollow">http://i46.tinypic.com/29z61c4.jpg</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="span4"&gt;
          &lt;img class="img-circle" src="assets/img/subfeatured1.jpg"&gt;
          &lt;h3&gt;Feature 1&lt;/h3&gt;
          &lt;p&gt;Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-primary" href="#"&gt;View details »&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br />
  <strong>CSS:</strong></p>
  
  <pre><code>.img-circle {
    width: 70%;
    border: 10px solid white;
  
      -webkit-border-radius: 50%;
         -moz-border-radius: 50%;       
              border-radius: 50%;
  
         -webkit-box-shadow: 0 5px 12px rgba(0,0,0,1);  
            -moz-box-shadow: 0 5px 12px rgba(0,0,0,1);  
                 box-shadow: 0 5px 12px rgba(0,0,0,1);
  
       -moz-background-clip: padding;  
    -webkit-background-clip: padding-box;  
            background-clip: padding-box;
  }
  </code></pre>