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

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

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

４隅の丸め方

結果

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

CSSの記述

border-radiusの場合

上の画像の（１）～（４）、それぞれ以下の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>

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

<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;
}

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

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

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

歪んだ形状のデザイン

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

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隅の値をアニメーションで変化を付けるとこのようなアニメーションを作ることができます。

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とブレンドモードを併せて活用することでこのような表現もできます。

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それぞれでご説明しました。

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