Rounded Corner on Images

by Taufik Nurrohman

HTML

<img class="rounded border" src="http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg" alt="image" />
<img class="rounded shadow" src="http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg" alt="image" />

<figure>
    <img src="http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg" alt="image" />
</figure>

CSS

body {text-align:center;padding:10px;}

img.rounded {
 width:160px;
 height:160px;
 display:inline;
 margin:0px 5px;  
 -webkit-border-radius:85px;    
 -moz-border-radius:85px;    
 border-radius:85px;
}

img.border {
 border:5px solid #E62917;
}

img.shadow {
 -webkit-box-shadow:0px 0px 0px 5px #E62917;
 -moz-box-shadow:0px 0px 0px 5px #E62917;
 box-shadow:0px 0px 0px 5px #E62917;
}

figure {
 width:160px;
 height:160px;
 -webkit-border-radius:85px;    
 -moz-border-radius:85px;    
 border-radius:85px;
 border:5px solid #E62917;
 display:inline-block;
 margn:5px auto 0px;
 overflow:hidden;
}

figure img {
 width:100%;
 height:100%; 
 display:block;    
}