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" />




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