We would like to know how to create image with Circle Border and shadow.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.author-thumb {<!-- ww w . jav a 2 s. c o m-->
padding: 4px;
width: 80px;
height: 80px;
background: white;
border-radius: 100%;
-moz-border-radius: 100%;
overflow: hidden;
display: inline-block;
border: solid 1px #ccc;
vertical-align: bottom;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.circle-thumb {
border-radius: 100%;
-moz-border-radius: 100%;
}
</style>
</head>
<body>
<div class="author-thumb">
<img class="circle-thumb"
src="http://www.java2s.com/style/download.png" alt=""
width="80" height="80" />
</div>
</body>
</html>
The code above is rendered as follows: