HTML&CSS

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

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

また、丸める箇所を楕円形とすることで様々な形状をデザインすることもできるので、それについてもご紹介します。

4隅の丸め方

結果

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

(1)1箇所を角丸
(3)3箇所を角丸
(2)2箇所を角丸
(4)4箇所を角丸

CSSの記述

border-radiusの場合

上の画像の(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>

なお、以下のように書いても同じ結果となります。このように、4隅それぞれ別に指定することも可能です。ただ両方覚えるのも大変なので、4箇所指定する書き方を覚えておけばそれで済みます。

<style>
.radius-04 img {
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   border-bottom-left-radius: 50px;
}
</style>

clip-pathの場合

border-radiusではなくclip-pathを使っても同じようにできます。
clip-pathはIE以外ではサポートされているので、もう使っても良いでしょう。
clip-pathは、概念的には切り抜くということができるプロパティです。
clip-pathの場合は次のように記述します。roundの前の数字は、4辺を垂直方向に切り抜く場合に指定します。ここでは切り抜かないので、0を指定しているという形です。

<style>
  .radius-01 img { clip-path: inset(0 0 round 0 0 0 50px); }
  .radius-02 img { clip-path: inset(0 0 round 0 0 50px 50px); }
  .radius-03 img { clip-path: inset(0 0 round 0 50px 50px 50px); }
  .radius-04 img { clip-path: inset(0 0 round 50px 50px 50px 50px); }
</style>

円形にする

border-radiusプロパティの値はpxではなく%でも指定ができます。
そして、次の記述のようにして4箇所を50%で指定すると、上の画像のように円形になります。

<style>
  .circle img { border-radius: 50%; }
</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を使うと解決するというのを確認しています。

楕円を組み合わせた形状デザイン

楕円の基本的な書き方

次の図形は、左上の隅に楕円形の角丸を適用した結果です。楕円の一部であることが伝わるように、内側に破線で楕円を描いてありますが、お示しするコードは外側の実践の部分のものです。

HTML

<div id="ellipse-01"></div>

CSS

#ellipse-01{
   width: 200px;
   height: 100px;
   background-color: #fff;
   border: 2px solid #333;
   border-top-left-radius: 50px 30px;
}

このように、楕円の水平方向の長さと、縦方向の長さを2箇所指定することで楕円形となります。
4隅に指定し、かつ短縮形で書くと次のようになります。

左から順に、「横方向の左上、右上、右下、左下 / 縦方向の左上、右上、右下、左下」となります。
このように楕円にする場合は短縮形だとややこしいので、4隅別々で指定するようにしてもよいかもしれません。

#ellipse{
   border-radius: 50px 20px 30px 50px / 30px 50px 100px 10px;
}

歪んだ形状のデザイン

4隅の角丸の楕円形の縦横比を大きくすると、このように歪んだ面白い形になります。

Let’s Go!

HTML

<div id="ellipse-02"><p>Let's Go!</p></div>

CSS

#ellipse-02{
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   width: 200px;
   height: 100px;
   border: 3px dashed #000;
   border-top-left-radius: 250px 30px;
   border-top-right-radius: 20px 230px;
   border-bottom-right-radius: 250px 30px;
   border-bottom-left-radius: 250px 30px;
}

歪んだ形状にアニメーションを付けて変化させる

上述の歪んだ形状の4隅の値をアニメーションで変化を付けるとこのようなアニメーションを作ることができます。

Let’s Go!

HTML

<div id="ellipse-03"><p>Let's Go!</p></div>

CSS

#ellipse-03{
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 200px;
   height: 100px;
   background-color: #46e4a8;
   animation: ellipse-change 1s infinite;
}
@keyframes ellipse-change{
  0%{ border-radius: 50% 50% 70% 68% / 90% 80% 90% 90%; }
 20%{ border-radius: 60% 70% 70% 60% / 90% 70% 80% 80%; }
 40%{ border-radius: 50% 70% 60% 70% / 80% 80% 70% 70%; }
 60%{ border-radius: 40% 70% 50% 80% / 80% 70% 70% 60%; }
 80%{ border-radius: 50% 70% 50% 70% / 90% 80% 80% 70%; }
100%{ border-radius: 50% 50% 70% 68% / 90% 80% 90% 90%; }
}
}

ブレンドモードを用いた表現

border-radiusとブレンドモードを併せて活用することでこのような表現もできます。

Let’s Go!

Let’s Try!

HTML

<div class="circles-wrapper">
   <div id="circle-01"><p>Let's Go!</p></div>
   <div id="circle-02"><p>Let's Try!</p></div>
</div>

CSS

.circles-wrapper{
   display: flex;
   align-items: center;
   justify-content: center;
}
#circle-01,
#circle-02{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 200px;
   height: 100px;
   border-radius: 100%;
   mix-blend-mode: multiply;
}
#circle-01{
    background: #46e4a8;
}
#circle-02{
   background: #46e4d7;
   margin-left: -52px;
}

まとめ

CSSで角丸や円形にする方法をborder-radiusとclip-pathそれぞれでご説明しました。

また、歪んだ形状を作ったり、それを動かしたり、ブレンドモードを活用したりで表現の幅が広がりますので、ぜひオリジナルなデザインを楽しみましょう。

著者のイメージ画像

株式会社BringFlower
稲田 高洋(Takahiro Inada)

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