css_attribute

border-radius

by Mai zhikun

HTML

<img src='http://hm.baidu.com/hm.gif' class="img_radius radius_tl" />
<img src='http://hm.baidu.com/hm.gif' class="img_radius radius_br" />
<img src='http://hm.baidu.com/hm.gif' class="img_radius radius_tl_br" />
<img src='http://hm.baidu.com/hm.gif' class="img_radius radius_all" />
<img src='http://hm.baidu.com/hm.gif' class="img_radius" />

CSS

.radius_tl { border-top-left-radius: 100%;  }
.radius_br { border-bottom-right-radius: 100%;  }
.radius_tl_br { 
    border-top-left-radius: 100%;  
    border-bottom-right-radius: 100%;
}
.radius_all { border-radius: 50% }
.img_radius {
     width: 100px;
    height: 100px;
    background-size: cover;
    background-image: url(http://publish.404mzk.com/image/superman_6.jpeg);
}