Border Radius + Padding

by Kyle Mitofsky

HTML

<h3>Without Padding</h3>
<img src="http://i.imgur.com/UAef0.jpg" 
     class="square curved" />


<h3>With Padding</h3>
<img src="http://i.imgur.com/UAef0.jpg" 
     class="square curved padding" />


<h3>With Padding + Fix</h3>
<img src="http://i.imgur.com/UAef0.jpg" 
     class="square curved padding invisible-border" />













<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;background:lightgray;width:100%;'>
    About this SO Question : 
    <a href='http://stackoverflow.com/q/9409632/1366033'>
        Border-radius and padding not playing nice
    </a><br/>
</div>

CSS

.square {
    width: 100px;
    height: 100px;
}
.curved {
    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
}
.padding {
    padding: 15px;
}
.invisible-border {
    border: 1px solid transparent;
}