今回は、border-radiusがimgタグにも効く！ってことを共有します。
普通に正方形の画像を配置した場合（背景色はブラックにしています）、
以下のようになります。
こちらの画像imgタグにborder-radiusを付けることで円形にくり抜くことができるのです。
img{
width: 220px;
border-radius: 50%;
}
border-radiusの値を0〜50%の間で変更して見て下さい。
円形以外にも丸みをおびた表現が可能になります。
border-radius不思議ですね。詳細仕様は以下で確認できます。
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius?v=example