• Posted on November 16, 2013

Round Images using CSS

On your site, you may have the need for round images or images that are circles instead of squares. Without having to run the image through a script to make it round, you can use CSS3. This method is supported in nearly every browser now, but I will include prefixes so it will be even more compatible.

<!doctype html>
<html>
	<head>
		<style>
			/* Styles will be placed here */
		</style>
	</head>
	<body>
		<img src="square.png" class="round" alt="Square Image" width="250" height="250" />
	</body>
</html>

With our basic HTML and sample image (not included), we can now add the style inside the head tags or our external style sheet. We are identify the images with the img tag name with the class of round. Make sure you set the class for your images that you want to be round.

img.round {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

Since each corner will be rounded to 50% of the image width, this ends up being a full circle. You can of course adjust the values to pixels or lower percents to be partially round with flat edges. If you want each corner to be a different value of border-radius, you can set multiple values in the main property or use it’s sub properties. All sub properties should also be copied to have all of the above prefixes also. Border-radius is widely supported, but some browsers don’t have the normal property set to work yet.

img.round {
	/*
		Top Left: 10%
		Top Right: 20%
		Bottom Right: 30%
		Bottom Left: 40%
		The values are set going clockwise from the top left
	*/
	border-radius: 10% 20% 30% 40%;

	border-top-left-radius: 10%;
	border-top-right-radius: 20%;
	border-bottom-right-radius: 30%;
	border-bottom-left-radius: 40%;
}

For more information on CSS3’s Border-Radius, you should visit the Mozilla.org website.