CSSで角丸にする方法を、4箇所すべての場合と、1箇所だけ、2箇所だけ、3箇所だけにする場合、それぞれについてご紹介します。IEのサポートを考えなくて良い今は、border-radiusを使う方法とclip-pathを使う方法の2つあります。

CSSで角丸(1箇所だけなども)、円形をborder-radiusとclip-pathそれぞれで

4パターンの方法と結果

結果

まずは結果からお見せします。

(1)1箇所を角丸
(3)3箇所を角丸
(2)2箇所を角丸
(4)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それぞれでご説明しました。

著者のイメージ画像

BringFlower|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。