CSSのborder-radiusを極める！円・角丸自在に実装

border-radiusは要素の四隅に丸みをつくるCSSプロパティです。要素に丸みをつけて柔らかい雰囲気を表現したり、ボタンリンクのデザインにも使われます。

Web制作においてよく使うプロパティです。
border-radiusを使いこなすと円や楕円だけでなくさまざまな図形を表現できるようになります。ぜひ最後までご覧ください。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

border-radiusでよく使われる3つの図形を作成する方法を解説

border-radiusを用いて、使われる頻度の高い3つの図形の作成方法を解説します。

1. 正円形
2. 楕円形
3. 長円形【ボタンデザインで頻出】

1.正円形

正円形の作り方を解説します。

正円形は正方形の画像にborder-radius: 50%;を指定すると作成可能です。

.container{
  /*背景色指定省略*/
  /*要素を高さ、幅共に200pxの正方形*/
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

2.楕円形を作成する方法

楕円形の作り方を解説します。

楕円形は長方形にborder-radius:50%;を指定すると作成可能です。

.container{
  background-color:aqua;
  /*要素を高さ200px、幅300pxの長方形*/
  width: 300px;
  height: 200px;
  border-radius: 50%;
}

3.長円形を作成する【ボタンデザインで頻出】

長円形の作成方法を解説します。

ボタンデザインでよく使われる図形です。

長円形は 長方形にborder-radiusを9999pxに指定すると作成可能です。

border-radiusの性質を利用し、9999pxを指定すると長円形が作成できます。

9999pxを指定するメリットは要素の高さを変更しても長円形が崩れない点です。

border-radiusを使う際に理解しておくべき性質

デザインカンプ通りに要素に角丸を実装するために、border-radiusの性質を理解しておくべきです。

border-radiusはpxや％、em、rem、vw、vhなどの単位を用いて、角丸のサイズを指定します。

主に使われる単位はpxか％でそれぞれ性質には異なるのです。

px指定と％指定に分けてborder-radiusの性質について解説します。

border-radiusをpx指定する際の3つの性質

px指定の性質について解説します。

例）幅500px高さ200pxの要素を用意し、border-radiusを50pxに指定

<div class="container">
</div>

.container{
  /*背景色指定省略*/
  width: 500px;
  height: 200px;
  border-radius: 50px;
}

50pxの角丸が四隅に作成できました。

ここでborder-radiusを100pxに変更してみましょう。

.container{
  /*背景色指定省略*/
  width: 500px;
  height: 200px;
  border-radius: 100px;
}

要素の高さ200pxの半分の100pxに角丸を指定したことで、上下の角丸が結合しました。

要素の形状がボタンデザインで使われる長円形になるのです。

ここでborder-radiusを101px以上の値にした場合、どのように表示されるか理解しておくのが重要です。

試しにborder-radiusを150pxに指定してみます。

.container{
  /*背景色指定省略*/
  width: 500px;
  height: 200px;
  border-radius: 150px;
}

border-radiusが100pxのケースと同じ状態で表示されました。

事例をふまえborder-radiusをpx指定する際の性質を3つにまとめています。

1.border-radiusを「要素の短辺の長さ×0.5」に指定すると要素の短辺側に半円ができる

要素の短辺の長さの半分の値をborder-radiusに指定すると、短辺に半円ができます。

つまり「要素の短辺の長さ×0.5」をborder-radiusに指定すると、要素の形状を長円形に変更できるのです。

2.「要素の短辺の長さ×0.5< border-radiusの値」でも要素の短辺側に半円ができる

要素の短辺の長さの半分を超える値をborder-radiusに指定しても、短辺に半円ができます。

border-radiusを150pxに指定すると上下の丸角のサイズの合計は300pxです。

つまり、要素の高さ200pxを超えます。

このケースでは要素の高さ200pxに合わせ調整され、border-radiusを100pxに指定した時と同じように表示されるのです。

この性質を利用しborder-radiusに9999pxを指定すると、要素の高さ変更でも形が崩れない長円形を作成できます。

長円形はボタンデザインによく使われる形状なので「border-radius:9999px」は重宝するのです。

3.px指定では角丸の縦と横の長さが対称になる

px指定では角丸の縦と横の長さが対称になります。

border-radiusを150pxに指定したケースに注目してみましょう。

丸角のサイズが縦横対称の100pxに調整され、横方向のサイズだけが150pxになることはありません。

以上の性質を理解しておくと、px指定でのコーディングがスムーズになります。

尚「px指定」の性質に準じて、remやem、vw、vhなどの単位での指定も可能です。

border-radiusを％指定する際の3つの性質

border-radiusで％指定を行う際には、px指定とは性質が異なるので注意が必要です。

border-radiusを％指定すると、要素のサイズに対しての割合で角丸のサイズを指定できます。

例）幅500px×高さ200pxの要素にborder-radius30%を指定

.container{
　　/*背景色指定省略*/
　　width: 500px;
　　height: 200px;
　　border-radius: 30%;
}

上記の例では横150px、縦60pxの角丸を形成しました。

次にborder-radiusを50％に指定してみましょう。

.container{
　　/*背景色指定省略*/
　　width: 500px;
　　height: 200px;
　　border-radius: 50%;
}

border-radiusに50%を指定すると、要素の外周（border）から直線の部分がなくなり円形に変化しました。

さらにborder-radiusを80%に変更してみましょう。

.container{
　　/*背景色指定省略*/
　　width: 500px;
　　height: 200px;
　　border-radius: 80%;
}

border-radiusを80％に指定しても、50％指定と変わらない形状で表示されました。

事例を踏まえborder-radiusを%指定する際の性質を3つ解説します。

1.border-radiusを50%指定すると要素が円形になる

border-radiusを50%指定すると要素が円形になります。

図のように４つの角丸が結合した状態になり円を形成するのです。

2.50%以上の数値を指定しても、50%指定の状態から変化しない

border-radiusに50%以上の数値を指定しても、要素の形状は50％指定の状態から変化はしません。

border-radiusに50%以上の値を指定しても調整され、50%指定のときと同じ形状で表示されます。

3.%指定では要素のサイズに応じて角丸の縦横のサイズが個別に算出される

%指定では角丸のサイズが要素の縦横のサイズに応じて個別に算出されます。

px指定のように必ずしも角丸の縦横のサイズが対称になりません。

実例を用いて解説します。

要素の形状が長方形の場合、角丸の縦横は非対称です。

要素の形状が正方形の場合だけ、角丸の縦横は対称となります。

四隅に個別の角丸を指定する方法を解説

四隅に別々の角丸を指定する方法を解説します。

個別の角丸を指定する際のプロパティをまとめました。

border-radiusプロパティだけで、4つのプロパティの指定をまとめて記述することも可能です。

border: 値1（左上）値2（右上）値3(右下)　値4(左下）;

実例を用いて解説します。

.container{
  /*背景色、要素サイズ指定省略*/
  border-top-left-radius: 30px;/*要素の左上角にborder-radius30pxを指定*/
  border-top-right-radius: 90px;/*要素の右上角にborder-radius90pxを指定*/
  border-bottom-right-radius: 30px;/*要素の右下角にborder-radius30pxを指定*/
  border-bottom-left-radius: 90px;/*要素の左下角にborder-radius90pxを指定*/
}

または

.container{
   /*背景色、要素サイズ指定省略*/
  border: 30px 90px 30px 90px;
}

と記述しても同じ結果で出力されます。

4つの要素に個別の角丸を実装できました。

四隅に個別の角丸を指定する方法を解説(応用編)

border-radiusでは角丸の縦横のサイズも個別に指定できるので、応用編として解説します。

border-radiusを個別指定できるプロパティには2つまで値を指定可能です。

border-top-left-radiusを用いて解説します。

border-top-left-radius:値1（左上角丸の横のサイズを指定）値2（左上角丸の縦のサイズを指定）;

実例で確認してみましょう。

.container{
 /*背景色、要素サイズ指定省略*/
　border-top-left-radius: 100px 50px;
}

角丸の縦方向と横方向に個別の指定ができました。

四隅全てを同様に指定してみます。

.container{
　　/*背景色、要素サイズ指定省略*/
　　border-top-left-radius: 49% 76%;
　　border-top-right-radius: 51% 20%;
　　border-bottom-right-radius: 91% 80%;
　　border-bottom-left-radius: 9% 24%;
}

上記の記述をborder-radiusでまとめて記載することが可能です。

.container{
　　/*背景色、要素サイズ指定省略*/
　　border-radius: 49% 51% 91% 9%/ 76% 20% 80% 24%;
}

計8つの値をborder-radiusに指定することが可能です。

スラッシュの前の値は角丸の横方向、後の値は角丸の縦方向のサイズを指定しています。

実際にブラウザで確認してみましょう。

有機的なイメージの図形が作成できました。

しかし8つの値を細かく指定して、イメージ通りの図形を作成するのは困難です。

そこでborder-radiusで図形を作成するためのジェネレーター「FANCY-BORDER-RADIUS」 の活用をおすすめします。

border-radiusを使って複雑な図形を直感的に作成でき便利です。

まとめ

この記事ではWeb制作で使用頻度の高いborder-radiusの使い方について解説しました。

border-radiusで正円形や長円形を作成するのはそこまで難しくありません。

しかしborder-radiusの性質はやや複雑な面があります。

現場でデザインカンプ通りに実装するのであれば、border-radiusの性質について正しく理解する必要があるのです。

border-radiusの性質について詳しく解説しているので参考の上、実装にチャレンジしてみてくださいね。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー