5分で分かる!基本から応用まで解説するborder-radius。CSSでボックスの角を丸くする方法

  • 2020年5月18日
  • 2020年6月7日
  • CSS
CSS 15分で分かる!基本から応用まで解説するborder-radius。CSSでボックスの角を丸くする方法

どうも!ライカです。

今回はWordPressを使う時に装飾レイアウトによく使うborder-radiusの解説です。

 

囲み枠を作るときなど角を丸くしたり、おしゃれに形を変えることができるCSSです。

しっかりと解説しますので、是非サイトをおしゃれに装飾してくださいね。

 

今回のみどころ

 角を丸くすればいー

 サイトをおしゃれにすればいー

 ついでにリライトすればいー

 

 

border-radiusとは?基本的な使い方の解説

 

border-radiusは上下左右の角を丸くするプロパティです。

divなどのボックス要素のプロパティ一緒に使います。

borderを使うことで、更に装飾の幅も広がるので、別記事を参考にしてください。

 

「【CSS】10分で分かるborderの使い方。基本から基礎応用まで解説」はこちら>>

 

うまく使っておしゃれで個性的なサイトに仕上げてくださいね。

 

基本構文html
<div class="border-test">少し角が丸くなった</div>
CSS
.border-test{
border:1px solid #000;
border-radius:10px;
}

※分かりやすいようにtext-alignなどは記述していません。

 

少し角が丸くなった

 

border-radiusは記述の仕方で、様々な大きさや形で角の丸み出すことができます。

少し考え方が特殊ですが、図解を使いながら説明していきますね。

 

 border-radiusは四角の角に円を合成したイメージ

border-radiusは四角の角に円を合成したイメージです。

厳密には違うので、厳密な考え方は後ほど応用編でしっかり解説します。

でも、イメージはこんな感じ。

 

border-radiusは角に円があるようなイメージ

 

もちろん実際に円は表示されませんが、例えば先ほどの基本構文の例で行くと5pxで設定してましたよね。

角に半径5pxの円を乗せて、はみ出した分の角を取って形づくられると思ってください。

 

赤線で書いてる部分が実際の形になりますが、この仮想の円の形や大きさや形を変えて、ボックスの形を変えていきます。

【border-radiusの値を2つにする】対角線の角に数値が反映される

border-radiusで指定する値を2つにすると、ボックスの対角線の角ごとに数値が反映されます。

 

↓↓↓こんな感じ。

border-radius: 20px 50px;

対角線の角が

 

1番目の値:左上・右下 2番目の値:右上・左下

 

border-radiusで値を2つ指定すると対角線の角に反映される

【border-radiusの値を4つにする】全ての角に別々の丸みをつける

border-radiusは角ごとに丸みの大きさを変えることがでます。

 

↓↓↓こんな感じ。

border-radius:5px 10px 20px 30px;

四つの角が別々の大きさで丸くなった

 

左上の角を基準としてグルっと時計回りに、1番目の値:左上・2番目の値:右上・3番目の値:右下・4番目の値:左下に対応しています。

 

border-radiusの値を4つ記述したときの対応する角の解説

楕円の円弧を使って角に歪みをつくる【border-radius基礎応用編】

これまでは、border-radiusの円のサイズを変更して丸角を作りましたが、border-radiusは円を楕円にすることで、個性的な形を作ることができます。

 

↓↓↓こんな感じ。

四つの角が別々の大きさで丸くなった

 

角の丸みが変わったのは分かりますよね。

↓↓↓このように書きます。

border-radius: 60px / 20px;

 

border-radiusの円弧を楕円にした時に、角の丸みのイメージ

 

border-radiusの値を半角の/(スラッシュ)で区切って書くことで、楕円を描くことができます。

スラッシュ前の値が横・スラッシュ後の値が縦の円の長さを指定します。

楕円の書き方の考え方と角の対応は同じ

 

border-radiusの書き方border-radius:20px 40px / 30px 20px;
border-radius:50px 20px 15px 15px / 45px 35px 100px 60px;

 

border-radiusで値を8つにした時の対応する辺の解説

 

border-radius:(円の横の半径の長さ)/(円の縦の半径の長さ)

 

楕円の描き方は、値が2つの時も4つの時も考え方は同じです。

画像は値が4つ(合計8つ)の時に対応する場所です。

値が2つの場合は、a・b・e・fの値が対角線に反映されます。

 

今までの考え方は画像の左の考え方です。

「半径をピクセルを設定して円弧を作る」ということでしたが、複雑な形を作るときには右の画像の考え方が必要になります。

この後解説しますが、とりあえず「aやbの場所がずれてるなー」というイメージを覚えておいてくださいね。

 

一部(上だけ・左だけなど)に反映させる【border-radius基礎応用編】

border-radiusは『4つの角全て同じ』・『2対で対角線が同じ』・『4つの角がバラバラ』ということは、理解できたと思います。

では、右上だけとか左側だけなどを変える場合を解説していきます。

 

↓↓↓このように書きます。
border-top-right-radius: 20px 50px

右上だけに反映させる

border-bottom-left-radius: 50px 70px; border-top-left-radius: 50px 70px;

左側だけに反映させる

 

border-top-right-radius(右上の角)
border-top-left-radius(左上の角)
border-bottom-right-radius(右下の角)
border-bottom-left-radius(左下の角)

 

一部だけかける場合はborder-top-right-radiusなどで対応します。

border-radiusと同じで、正円で角を作るときは1つ、楕円にする場合は2つの値を設定します。

 

 『border-top-right-radius: 20px 50px』は『border-radius:0 20px 0 0 / 0  50px 0 0;』という記述でも結果は同じですが、SEO対策としても明確になる記述を心がけましょう。

角を丸くするだけじゃない。様々な複雑な形を作る【border-radius応用編】

border-radiusは角を丸くするだけではなく、色々な形を作ることができます。

 

使用例1
使用例2

 

 パーセントにすると、色々な形を作りやすくなる。

 

border-radiusの値はピクセルではなく、パーセントで記述することができます。

また、値の記述方法は一緒です。

 

border-radiusのパーセントでの記入例(上記の「使用例2」の値です)border-radius: 60% 40% 40% 60%/ 80% 20% 80% 20%;

 

ピクセルでも作れないわけではありませんが、少し難しいかもしれません。

【楕円の書き方の考え方と角の対応は同じ】で載せていた画像を覚えていますか?

ここでもう一度確認しましょう。

 

border-radiusで値を8つにした時の対応する辺の解説

 

ピクセルとパーセントは、何となくですが考え方の違いがあります。

 

ピクセル:円の半径を指定して、円の曲線を描きます。
パーセント:対応してる一辺を100%として、指定した%を半径に設定します。

 

dとhを使ってもう少し簡単に説明していきます。

ピクセルは「dとhの値を半径として楕円もしくは正円を作って、その円に合わせて湾曲させる」ので、ボックスのサイズに対して、どれくらいのサイズの半径が必要なのかを計算する必要があります。

パーセントは「(今回は左下)角からボックスのd側の辺の何パーセント・h側の辺の何パーセント半径として湾曲させる」ので、辺のこのあたりから曲げたいというのが、簡単にできます。

 

d:50%、h:50%、b:33%、f:33%の例

border-radiusの値をパーセントでした時のイメージ

 

おすすめ(DL特典: CSS Flexbox チートシート) 1冊ですべて身につくHTML & CSSとWebデザイン入門講座

おすすめ記事【CSS】10分で分かるborderの使い方。基本から基礎応用まで解説>>