
CSSで角丸にする方法を、4箇所すべての場合と、1箇所だけ、2箇所だけ、3箇所だけにする場合、それぞれについてご紹介します。IEのサポートを考えなくて良い今は、border-radius
を使う方法とclip-path
を使う方法の2つあります。
CSSで角丸(1箇所だけなども)、円形をborder-radiusとclip-pathそれぞれで
4パターンの方法と結果
結果
まずは結果からお見せします。




CSSの記述
上の画像の(1)~(4)、それぞれ以下の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それぞれでご説明しました。