【CSS】入門者向けにborder-radiusプロパティを徹底解説！！

こんにちは。

長方形のボックスや見出しのボーダーなどで柔らかい印象を表現したい時に角を取りたい時ってありますよね。

そこでネットサーフィンをしているとたまにborder-radiusというプロパティを目にすることはありませんか？

border-radiusって結局何の値なの？

という人も少なからずいるはず…

何となく「とりあえず5pxぐらいでいっか！」というふうに設定していませんか？このborder-radiusの指定できる値の原理を知っておくとデザイン力の向上にもつながります。

そこで今回はborder-radiusプロパティの

・基本的な使い方
・border-radiusの応用例

を紹介します！

目次 [非表示]

1 border-radiusとは
2 border-radiusの基本的な使い方
3 border-radiusの応用例
- 3.1 円
- 3.2 クローバー
4 まとめ

border-radiusとは

border-radiusの読み方

border-radiusは「ボーダーレイディアス」、または「ボーダーレイジアス」と読みます。筆者の周りでは「レイディアス」派の人が多い印象にありますね。

radiusは日本語で「半径」を意味しますが、プロパティの意味としても半径に関連した値を指定するので覚えやすいですね！

border-radiusはボックスの角を丸くするプロパティ

border-radiusプロパティの用途は

ボックスの角を丸くするプロパティ

です。

デザインの用途として、見るひとに柔らかい印象を与えたい時などに使用されます。

ちょうどこの見出しの「ボックスの角を丸くするプロパティ」を囲っているグレーの外枠みたいな感じですね！

border-radiusで利用できる値

border-radiusでは以下の値を使うことができます。

値	説明
単位つき数値	pxやptなどの単位をつけた数値。
パーセンテージ	ボックスの横幅や縦幅に対しての割合で指定することも可能。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ	対応状況
Chrome	完全対応
Edge	完全対応
Firefox	完全対応
Internet Explorer	完全対応
Opera	完全対応
Safari	完全対応
スマートフォン用ブラウザ	対応状況
Android webview	完全対応
Android版Chrome	完全対応
Android版Firefox	完全対応
Android 版 Opera	完全対応
iOS版Safari	完全対応
Samsung Internet	完全対応

border-radiusの基本的な使い方

ここではborder-radiusプロパティの値計算の原理から具体的な使い方を解説します。

border-radiusの値の原理

border-radiusプロパティがボックスの角を丸くする、と言っても何を基準に数値を入れたら良いのか、知っている人は実は少ないという現状があります。

ネットサーフィンをしていても「とりあえず5pxぐらい」のように感覚で値を指定している人が目立ちます。

そこで一旦、border-radiusの値の計算の原理を解説します。

上の図はborder-radiusに指定する値の原理を図示したものです。

border-radiusの値には、ボックスの角を1/4の円にみたてた時の半径を指定します。

なので「 border-radius: 5px; 」と指定した場合はこの1/4の円の半径が5pxという意味になります。

border-radiusの実装例

それではさっそくborder-radiusの実装例をサンプルコードと一緒に見ていきましょう。

<!-- HTML -->
<h2 class="hedding-1">見出し</h2>
<h2 class="hedding-2">見出し</h2>

// CSS
.hedding-1 {
  padding: 1.5rem 2.5rem;
  border: 4px solid #89c4ff;
  margin-bottom: 10px;
}
.hedding-2 {
  padding: 1.5rem 2.5rem;
  border: 4px solid #89c4ff;
  border-radius: 10px;
}

// CSS

.hedding-1 {

padding: 1.5rem 2.5rem;

border: 4px solid #89c4ff;

margin-bottom: 10px;

}

.hedding-2 {

padding: 1.5rem 2.5rem;

border: 4px solid #89c4ff;

border-radius: 10px;

}

上の見出しはborder-radiusを適用していない普通のボックスです。比較してみると、border-radiusを指定している下のボックスの方は四隅が少し丸くなっていますよね。

border-radiusを指定するとこのように角を丸くすることができます。

ボックスの角を個別に丸くするには？

border-radiusを使用してボックスの角を個別に丸くすることもできます。

上下左右それぞれ別々に指定

h1 {
  padding: 1.5rem 2.5rem;
  border:5px solid red;
  border-radius: 20px 80px 24px 40px; // 左上 右上 右下 左下
}

h1 {

padding: 1.5rem 2.5rem;

border:5px solid red;

border-radius: 20px 80px 24px 40px; // 左上右上右下左下

}

このように、border-radiusに4つの値を指定することによって角を個別に丸くすることができます。

左上と右下、右上と左下をそれぞれ別々に指定

h1 {
  padding: 1.5rem 2.5rem;
  border:5px solid red;
  border-radius: 0 70px; // 左上と右下 右上と左下
}

h1 {

padding: 1.5rem 2.5rem;

border:5px solid red;

border-radius: 0 70px; // 左上と右下右上と左下

}

個別に指定するプロパティを使用する

実はborder-radiusプロパティと類似した「border-上下-左右-radius」プロパティというCSSプロパティが存在します。

この上下にはtop, bottomのいずれか、左右にはleft, rightのいずれかが入ります。

角を個別に丸くするにはこのプロパティを使用する方法もあります。

h1 {
  padding: 1.5rem 2.5rem;
  border:5px solid red;
  border-top-left-radius: 70px; // 左上
  border-bottom-right-radius:50px; // 右下
}

h1 {

padding: 1.5rem 2.5rem;

border:5px solid red;

border-top-left-radius: 70px; // 左上

border-bottom-right-radius:50px; // 右下

}

border-radiusの応用例

ここではborder-radiusを応用した例を紹介します。

円

border-radiusプロパティを使用することによって、円をコーディングで表現することができます。

<!-- HTML -->
<div></div>

1 2	<!-- HTML --> <div></div>

// CSS
div {
  width: 300px;
  height:300px;
  background-color: red;
  border-radius:50%;
}

// CSS

div {

width: 300px;

height:300px;

background-color: red;

border-radius:50%;

}

円を作成するには同値のwidthとheightのボックスに対して、border-radiusの値を50%と指定することによって実装できます。

クローバー

こちらは使用頻度はほとんどありませんが、こんなのも作れるよ〜程度に思っておいてください。(笑)

<!-- HTML -->
<div class="outer">
  <div class="child-1"></div>
  <div class="child-2"></div>
  <div class="child-3"></div>
  <div class="child-4"></div>
</div>

</div>

// CSS
.outer {
  width: 150px;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
}
.child-1,.child-2,.child-3,.child-4 {
  width: calc(50% - 6px);
  height: calc(50% - 6px);
  margin:3px;
  background-color: lightgreen;
}
.child-1 {
  border-radius: 50% 50% 0 50%;
}
.child-2 {
  border-radius: 50% 50% 50% 0;
}
.child-3 {
  border-radius: 50% 0 50% 50%;
}
.child-4 {
  border-radius: 0 50% 50% 50%;
}

// CSS

.outer {

width: 150px;

height: 150px;

display: flex;

flex-wrap: wrap;

}

.child-1,.child-2,.child-3,.child-4 {

width: calc(50% - 6px);

height: calc(50% - 6px);

margin:3px;

background-color: lightgreen;

}

.child-1 {

border-radius: 50% 50% 0 50%;

}

.child-2 {

border-radius: 50% 50% 50% 0;

}

.child-3 {

border-radius: 50% 0 50% 50%;

}

.child-4 {

border-radius: 0 50% 50% 50%;

}

このように、border-radiusを応用するとクローバーのような変わった図形も表現することができます。

まとめ

いかがでしたか？

今回は border-radiusプロパティの基本的な使い方と応用的な使い方を紹介していきました。

border-radiusプロパティは使い方によって様々なデザインを実現することができるので、しっかりと使い方をマスターしておきましょう！

参考文献：https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。