Create circular images with CSS

Posted 5 Feb 17 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" />

 

Forest

 

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





Post Comments

Darren Welch

By

Darren Welch


  5 Feb 17


Contact me online

 Facebook

 Twitter

 Linked In

 Git Hub

Related Content




Google Tips

05 Feb 2017




Learn to code

05 Feb 2017




Send ctrl alt delete over remote desktop

05 Feb 2017