Create circular images with CSS

Posted 10 November 2016 by Darren Welch

Sometimes your images can look a little straight edged and boring.  So why not spruce it up with circular edges. 


Forest   Forest 


It's actually very simple.  You just need to use the "border-radius" property and set it's value to 50%.  You need to make sure you have a completely square image.  Otherwise, it can end up looking a little elliptical.


If you add this style to your CSS:

.encircle-img { border-radius: 50%;}


and then apply it to your image:

<img src="/images/round-edge-example.jpeg" class="encircle-img" />




That's all there is to it, happy circling!

Darren Welch


Darren Welch

  10 November 2016

Contact me online



css html

Has this helped?

If this has saved you time and you are feeling generous, why not buy me a coffee.

Thank You cup of coffee

Related Content