先生と生徒の会話形式で理解しよう

生徒

「先生、ウェブサイトでよく見る角が丸いボックスって、どうやって作るんですか？」

先生

「あれはCSSのborder-radiusというプロパティを使って作るんですよ。」

生徒

「border-radiusっていうのがあるんですね！どうやって使うんですか？」

先生

「とても簡単です。丸みの大きさを数字で指定するだけで、角を滑らかにできます。実際に見てみましょう。」

1. CSSのborder-radiusとは？

CSSのborder-radius（ボーダー・ラディウス）とは、ボックスの角を丸くするためのプロパティ（設定項目）です。ウェブサイトでよく見る「角がやわらかいカード」や「丸いボタン」などは、このborder-radiusで作られています。

たとえば、四角いボックスに「半径（radius）」のような丸みを与えるイメージです。角を削って丸くしている感じですね。

このプロパティを使うと、角を少しだけ丸くしたり、完全な円形にすることもできます。つまり、シンプルなデザインからおしゃれなボタンまで、幅広く活用できる重要なCSSの基本です。

2. border-radiusの基本的な書き方

角を丸くするには、CSSで次のように指定します。


<style>
.box {
    border: 2px solid #007bff; /* 境界線（ボーダー）を青色に設定 */
    border-radius: 10px; /* 角を10ピクセル丸める */
    padding: 20px; /* 内側の余白を20ピクセル */
    width: 200px;
    text-align: center;
}
</style>

<div class="box">角が丸いボックス</div>

ブラウザ表示

このように、border-radiusに「10px」と指定すると、角が少し丸くなります。数字を大きくするほど、丸みが強くなります。

3. border-radiusで作るいろいろな角丸ボックス

border-radiusは1つの値だけでなく、複数の値を指定して角ごとに丸みを変えることもできます。

3-1. 全ての角を同じように丸くする

もっとも基本的な指定方法です。すべての角が同じ丸みになります。


<style>
.box1 {
    border: 2px solid #28a745;
    border-radius: 20px;
    padding: 20px;
    width: 200px;
    text-align: center;
}
</style>

<div class="box1">全ての角が丸い</div>

ブラウザ表示

3-2. 片方だけ角を丸くする

border-radiusは、4つの角をそれぞれ指定できます。順番は「左上・右上・右下・左下」です。


<style>
.box2 {
    border: 2px solid #dc3545;
    border-radius: 20px 0 0 0; /* 左上だけ丸い */
    padding: 20px;
    width: 200px;
    text-align: center;
}
</style>

<div class="box2">左上だけ角丸</div>

ブラウザ表示

このように、角ごとにデザインを変えることで、個性的なボタンやカードデザインも作れます。

4. 完全な円形を作るには？

border-radiusを50%にすると、正方形のボックスを完全な円にすることができます。丸いプロフィール画像などもこの方法で作られます。


<style>
.circle {
    border: 3px solid #ff9800;
    border-radius: 50%; /* 完全な円にする */
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px; /* テキストを中央に */
}
</style>

<div class="circle">円形</div>

ブラウザ表示

画像を円形にしたいときも同じ考え方です。画像のタグにborder-radius: 50%;をつければ、簡単に丸いアイコンやアバターが作れます。