How to make a round image with CSS

Another interesting technique we can do is the round image with CSS, so we won’t need to re-generate a cropped image in PhotoShop to insert our site, only with CSS we can achieve this goal!

Explaining the technique:

You might already be expecting a big spell or trick to achieve this effect, but in fact, it’s all pretty simple

We just need to add a border-radius equivalent to 50% of the image, so the CSS will take care of creating the circular effect on the desired image.

Note that if the radius of the border is added, for example, 5 pixels, it already starts to round the corners of the image, so when we say that it is half of each corner we end up forming the circle effect.

Let’s see in practice?

Want to specialize in HTML and CSS? See our course catalog.

Code how to make the image round with CSS:

HTML code of the round image technique with CSS:

<img src="https://dummyimage.com/300x300/000/fff">

And here’s the CSS code we used to execute the effect:

img    {
    border-radius: 50%;
}

Final result:

See that with just a line we can reach our final goal, isn’t it wonderful? haha

Imagine having to generate this same round image every time it was changed via PhotoShop, or even remembering to do it right?

Or if her shape were to go back to square shape? A lot of wasted time!

Of course, this doesn’t only apply to images, we can do this with a square formed by a div, for example.

Hint: The figure needs to be square, otherwise we won’t have an ellipse!

The CSS rule transforms a square element into a round one, we can summarize it like this! 😀

And that’s it for today, until the next post!

Also, check out our free HTML and CSS course on YouTube by clicking here! Where we create a site from 0 to responsive 😀