How to make a square image round

If you have just one or two images that you want to be circles instead of squares, there’s a really simple line of code you can add to the image.  It will be much faster than editing your image in Photoshop.

If you remember from this post, you’ll remember that the code to add an image is this: <img src="">

You put your image url in between the quotation marks.  (You get the image url by right clicking on your image and selecting “Copy Image Address.”)

This is what the square image will look like:

To make that image appear round instead of square, we just need to paste in one little piece of code inside that.

This is the code we’ll paste in: style="border-radius: 50%;"

That code is saying to round the borders of the image starting at half-way across the edge.

You will paste that piece of code right in between img and src.  So it will look like this:

<img style="border-radius: 50%;" src="">

Then this is what you’ll have:

If you have any questions, ask in the comments below!