/b/ - Random

Avoid those pesky square images that look off in circles! Use a simple trick to make sure they always fit perfectly without cropping. HTML '''
<img src="your-image. jpg" alt=" class="circle">
Explanation
Add the following CSS:

. circle {border-radius: 50%;}

But wait, theres more! To ensure it works cross-browser and doesnt break when text wraps around your image (like in a card layout), try this:

img circle::before,circle img:after { content:"; display:block; clear:both }

Now you have perfect circles every time without the hassle of extra markup or complex JavaScript. Just use '''border-radius and say goodbye to those awkward square-circles!
>Remember, not all is as it seems in CSS land.
✔ Try this out on your projects today!