How to create a circle (round) image in CSS

shutterstock_197334071

There a lot of ways to display a round image on your website, but the best way to do it is by adding a few lines to your CSS files.

If you want to style your image directly, meaning that you’ve already added the image in the html file, observe the following html code:

<div class="container">
<img src="your-image-link" width="200" height="200"; >
</div>

In the CSS file, you should add the following rules:

.container img {border-radius:50%; width:200px; height:200px;}

Just make sure that you’ve added a square image in the html file.

Another way to do it vie CSS is to add the image as a background CSS rule to a HTML DIV

<div class="image"> </div>

And code these lines into your CSS file:

.image{width:200px; height:200px; border-radius:50%; background-image: url('your-image-link');}

You can also use PNG files to display pre-edited images as circles with transparent backgrounds, but by using the right code, you should be able to spare time for your graphic designer.

photo source: coder via shutterstock

Leave a Reply

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