I was at WordCamp Jacksonville 2017 and one of the speakers said something that caught my attention:
“You often see developers use border-radius: 100%, which works great, except when they start using rectangular images.”
I immediately thought: Well that’s just because they’re doing it wrong! I then went ahead and whipped up a simple Codepen demo to illustrate how it could be done.
The trick is to create your circle and then absolutely position the image you want to use inside of the circle. In the demo, I use a typical pattern used to center absolutely positioned elements:
The padding-bottom property is a percentage which is inherited from the element’s width, which creates a square, even if the circle element has a fluid width.