Circular Images with CSS3

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:

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.

.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.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie