Round Images using CSS

GeekThis remains completely ad-free with zero trackers for your convenience and privacy. If you would like to support the site, please consider giving a small contribution at Buy Me a Coffee.

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.

Related Posts

Hugo Footnotes and Citations

Add footnotes, citations, and references to your Hugo posts with this simple technique. Give your articles more credibility and improve your posts by making them more informative.

Custom Style RSS Feed

Customize the look and feel of your WordPress RSS feed by adding a stylesheet to your RSS XML feed.

Animated HTML Progress Bar CSS

Learn how to create an animated progress bar in HTML and CSS with no JavaScript.

Adding PHP to your HTML and CSS Blog

Learn how to create a simple PHP Blog in a matter of minutes.