CSS3 Border-Radius with Border - Circle Avatars

dabblet.css

/**
 * CSS3 Border-Radius with Border - Circle Avatars
 */
 
/* General Styles */

body {
	background: url(http://subtlepatterns.com/patterns/white_texture.png);
	font: 100 14px sans-serif;
	color: #444555; text-shadow: 0 2px white;
	text-align: center;	
}

::-moz-selection { background: rgba(0,0,0,0.1); }
::selection { background: rgba(0,0,0,0.1); }

h1 { font-weight: 100; font-size: 2.7em; }
h3 { color: #555666; font-size: 1.6em; }
a { color: RoyalBlue; font-weight: normal; text-decoration: none; }
a:hover { color: CornflowerBlue; }
ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }

/* Circle Avatar Styles */

.circle {
	line-height: 0;		/* remove line-height */ 
	display: inline-block;	/* circle wraps image */
	margin: 5px;
	border-radius: 50%;	/* relative value */
	border: 3px solid white;/* border width   */
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);	
	transition: linear 0.25s;
}
.circle img {
	border-radius: 50%;	/* relative value for
				   adjustable image size */
}
.circle:hover {
	transition: ease-out 0.3s;
	transform: scale(0.8) rotate(20deg) translateZ(0);
}
a.circle { color: transparent; } /* IE fix: removes blue border */

dabblet.html

<h1>Profile Avatar with Circular Border</h1>

<h3>Small Avatars</h3>

<a href="http://twitter.com/wilmoore" class="circle">
	<img src="http://twitter.com/api/users/profile_image?screen_name=wilmoore" alt="wilmoore">
</a>

<a href="https://plus.google.com/+WilMooreIII" class="circle">
	<img src="https://lh4.googleusercontent.com/-aqFX5Mc1qkY/AAAAAAAAAAI/AAAAAAAAAKc/Dg22nRiq78E/photo.jpg?sz=50" alt="[email protected]">
</a>

<h4>Tested and works on:</h4>
<ul>
	<li>Chrome 16</li>
	<li>Safari 5.1</li>	
	<li>Firefox 7+</li>
	<li>IE9 (no transition)</li>
</ul>

<p>Original Experiment By: <a href="https://gist.github.com/maxhoffmann/1500919" title="switch to twitter">Max Hoffmann</a></p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"html"}