5分で分かる！border-radiusの基本から応用まで解説します【CSSで角を丸くする方法】

どうも！ライカです。

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

囲み枠を作るときなど角を丸くしたり、強調したい時やサイトの雰囲気を変えるために活用したいものですね。

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

角を丸くするCSS「border-radius」とは？基本的な使い方の解説

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

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

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

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

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

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

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

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

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

イメージはこんな感じ。

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

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

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

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

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

↓↓↓こんな感じ。

■border-radius: 20px 50px;

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

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

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

↓↓↓こんな感じ。

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

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

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

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

↓↓↓こんな感じ。

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

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

■border-radius: 60px / 20px;

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

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

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

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

画像は値が４つ（合計８つ）の時に対応する場所です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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