CSSで角丸にする方法を、４箇所すべての場合と、１箇所だけ、２箇所だけ、３箇所だけにする場合、それぞれについてご紹介します。IEのサポートを考えなくて良い今は、border-radiusを使う方法とclip-pathを使う方法の２つあります。
CSSで角丸（１箇所だけなども）、円形をborder-radiusとclip-pathそれぞれで
４パターンの方法と結果
結果
まずは結果からお見せします。
CSSの記述
上の画像の（１）～（４）、それぞれ以下のCSSの記述になっています。
<style>
.radius-01 img { border-radius: 0 0 0 50px; }
.radius-02 img { border-radius: 0 0 50px 50px; }
.radius-03 img { border-radius: 0 50px 50px 50px; }
.radius-04 img { border-radius: 50px 50px 50px 50px; }
</style>
border-radiusプロパティで、左上、右上、右下、左下の順に角丸にする数値を指定していきます。pxの数が大きいほど大きな角丸になります。
4箇所を角丸にする場合は、50pxと4回書かなくても、次の記述で大丈夫です。
<style>
.radius-04 img { border-radius: 50px; }
</style>border-radiusではなくclip-pathを使っても同じようにできます。clip-pathはIEではサポートされているので、もう使っても良いでしょう。
角丸以外にも、切り抜くということができるプロパティです。clip-pathの場合は次のように記述します。roundの前の数字は、4辺を垂直方向に切り抜く場合に指定します。ここでは切り抜かないので、0を指定しているという形です。
<style>
.radius-01 img { clip-path: 0 round 0 0 0 50px; }
.radius-02 img { clip-path: 0 round 0 0 50px 50px; }
.radius-03 img { clip-path: 0 round 0 50px 50px 50px; }
.radius-04 img { clip-path: 0 round 50px 50px 50px 50px; }
</style>
円形にする
border-radiusプロパティの値はpxではなく%でも指定ができます。
そして、次の記述のようにして4箇所を50%で指定すると、上の画像のように円形になります。
<style>
.circle img { border-radius: 50px; }
</style>clip-pathを使った場合は次のような記述になります。この画像は幅、高さ250pxなので、その半分までの距離である125pxを最初に指定しています。
<style>
.circle img { clip-path: circle(125px at 50% 50%); }
</style>border-radiusとclip-pathの比較
border-radiusの方が指定する情報が少ないですし、おそらくブラウザ側での処理量も少なそうに思うので、border-radiusで事足りる場合はそちらを使う方が良いのではないかと私は思います。
ただ、画像に対してアニメーションを指定するような場合に外枠に対して角丸を指定したいことがあります。その場合にborder-radiusですと、iOSが対応しておらず、clip-pathを使うと解決するというのを確認しています。
まとめ
CSSで角丸や円形にする方法をborder-radiusとclip-pathそれぞれでご説明しました。
BringFlower｜稲田 高洋