I discovered how to create circular images using CSS3 the other day and thought it was totally awesome. The only drawback is that the image has to appear as a background image. You can’t really do this effect directly to an image that is displayed using an image tag. What this means is that no one will be able to actually click and drag the image onto their desktop, but that might be totally okay with you.

First the HTML:

<div class="circular"></div>

Not much to it. Next comes the CSS:

.circular {
	width: 300px;
	height: 300px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	background: url(http://link-to-your/image.jpg) no-repeat;
	}

A complete circle requires your border radius to be half of your width/height. Put it all together and your image will now look like this in Firefox, Safari and Chrome:

You can even add a border or a shadow.

I added a black shadow with an opacity of 80% to achieve the effect above. The CSS looks something like this:

.circular {
	width: 300px;
	height: 300px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	background: url(http://link-to-your/image.jpg) no-repeat;
	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	}

There is an actual workaround for those who want to allow people to drag the image onto their desktop, but it requires a bit more HTML and CSS.

<div class="circular"><img src="http://link-to-your/image.jpg" alt="" /></div>
.circular {
	width: 300px;
	height: 300px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	background: url(http://link-to-your/image.jpg) no-repeat;
	}

.circular img {
	opacity: 0;
	filter: alpha(opacity=0);
	}

Using the CSS above, you now allow users to drag the image to their desktop. Try it below.

You won’t actually see the image being dragged across the browser but it will appear on your desktop once you drop it there.

You can also just add rounded corners with the CSS above by lowering the radius of the curve from 150px to anything you want.