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);
}
a.circle { color: transparent; } /* IE fix: removes blue border */	

dabblet.html

<h1>CSS3 Border-Radius with Border</h1>

<p>Square image can be any size. Crossbrowser support. Minimal workaround.</p>

<h3>Small Avatars</h3>

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

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

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

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

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

<h3>Big Avatar</h3>

<a href="http://twitter.com/max_hoffmann" class="circle">
	<img src="http://behance.vo.llnwd.net/profiles9/545710/5a1ba5c679a44708c9b068d14cd1e7c8.jpg" alt="avatar">
</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>Found a bug? Send me a tweet: <a href="http://twitter.com/max_hoffmann" title="switch to twitter">@max_hoffmann</a></p>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}