How To Create Rounded Images In HTML CSS (Simple Examples)

Welcome to a quick on how to create rounded images in HTML and CSS. So you have a website and want to display images in a circular format? Thankfully, it is easy to do so with modern CSS.

There are 2 quick ways to create rounded images in CSS.

  1. For square images, simply add a 50% border-radius.
    • <img src="SQUARE.JPG" style="border-radius: 50%"/>
  2. For images that are rectangular, set it as the background image of a square <div> then add the 50% border-radius.
    • <div id="demo"></div>
    • #demo { width: 200px; height: 200px; }
    • #demo { background: url("BG.JPG"); border-radius: 50%; }

That about covers the essentials, but let us walk through some examples in this guide. Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Rounded Image Rounded Background Image
Useful Bits & Links The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

BASIC ROUNDED IMAGES

All right, let us now get started with the basic rounded CSS image.

 

THE BASICS

1-round-image.html
<style>
.roundimg {
  border-radius: 50%;
}
</style>

<img src="wamen-square.jpg" />
<img src="wamen-square.jpg" class="roundimg" />

 

THE EXPLANATION

Yep, it’s that simple. As some of you guys already know, we normally use border-radius to create rounded corners… So when we do a border-radius: 50%, it literally turns the container (or image) into a circle.

 

 

MUST BE SQUARE IMAGE!

Take extra note though – This trick will only work on square images. If we apply it to a rectangular image, it turns into an oval instead.


 

ROUNDED BACKGROUND IMAGE

So… just how do we turn a rectangular image into a circle. Let us walk through a solution with more controls in this section.

 

BACKGROUND IMAGE, WITH ROUNDING

2a-back-round.html
<style>
.roundedA {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: url('zman.jpg');
}
</style>

<img src="zman.jpg" />
<div class="rounded"></div>

 

THE EXPLANATION

This is still the same strategy as above, but we are applying it to a <div> instead –

  • width: 200px; height: 200px; border-radius: 50%; will turn the <div> into a circular container.
  • The image is then “added” using background-image: url('zman.jpg').

 

 

WAIT A MINUTE, SOMETHING LOOKS FUNKY.

As you may have also noticed – CSS will, by default, place the top left side of the image as the background. It will be “cut off” in an awkward manner if the image is off-centered. To fix that, we can manually reposition it using background-position, and also, resize it using background-size.

2b-back-pos-size.html
<style>
.roundedB {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: url('zman.jpg');
  background-position: 70% 50%;
  background-size: 130%;
}
</style>
 
<div class="roundedB"></div>

 

DEALING WITH MULTIPLE IMAGES?

That should cover all the basics, but what happens if we have to deal with multiple round images? As a small extra, I will recommend putting all the “basics” in a .rounded CSS class and manually specify the background-image in the inline style.

2a-back-round.html
<style>
.roundedC {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
</style>
 
<div class="roundedC" 
     style="background-image: url('wamen.jpg');
            background-position: 70% 50%;
            background-size: cover"></div>
<div class="roundedC" 
     style="background-image: url('zman.jpg');
            background-position: 70% 50%;
            background-size: 130%;"></div>

Yep… This is kind of the painful part of the process, but it’s better than manually editing every image.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEAT SHEET

How to create rounded images using CSS (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *