title: Border-radius and padding not playing nice
body: <p>I'm having trouble trying to get a radius on images. I've simplified my problem and exaggerated the variables for demonstration purposes.</p>
  
  <p><strong>CSS</strong>:</p>
  
  <pre class="lang-css prettyprint-override"><code>div.wrap img {
      -moz-border-radius: 50px;
           border-radius: 50px;
  }
  img.pic {
      padding: 15px 25px 35px 45px;
  }
  </code></pre>
  
  <p><strong>HTML</strong>: </p>
  
  
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;img class="pic" src="http://i.imgur.com/UAef0.jpg"
           width="300" height="300" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I remove the padding, poof, pretty corners.
  If it helps, there's a reason why they're in two different classes. "wrap" can have more than one "pic" in it. Sometimes they'll be of the same class, other times they wont, sort like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>img.left_pic  { float:left;  padding:5px 10px 5px 5px; }
  img.right_pic { float:right; padding:5px 5px 5px 10px; }
  </code></pre>
  
  <p>Any help or insight would be appreciated.</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/NwfW6/" rel="noreferrer">http://jsfiddle.net/NwfW6/</a></p>
  
  <p><strong>Edited for a solution:</strong></p>
  
  <p><a href="http://jsfiddle.net/NwfW6/29/" rel="noreferrer">This</a> was more or less what I basically was trying to do. I think I was having a 'duh' moment. I'm sure now the declaration I needed to used was <strong>margin</strong> <em>not</em> <strong>padding</strong>. Another Thanx to GGJ for reminding me how to go about it the right way. And what Jan said about adding padding to an 'img' tag making no sense, It doesn't. My bad.</p>