Create circular images with CSS


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!

Comment