CSSのborder-radiusで角丸ボックスを作る方法を完全ガイド！初心者でもできるデザインの基本

border-radiusで角丸ボックスを作る方法

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

生徒

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

先生

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

生徒

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

先生

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

1. CSSのborder-radiusとは？角を丸くする魔法のプロパティ

CSSのborder-radius（ボーダー・ラディウス）とは、HTML要素の「カド」を丸く削るための設定です。本来、ウェブサイトのボタンや画像などは四角形が基本ですが、このプロパティを使うだけで、スマートフォンのアプリのような「手に馴染むやさしいデザイン」に一瞬で変えることができます。

イメージとしては、四角い折り紙の角をハサミで丸く切り落とすような感覚です。指定する数字（半径）が大きければ大きいほど、角の丸みが強くなり、最終的には完全な円形を作ることも可能です。

ここがポイント！

親しみやすさ： 角を丸くすることで、ユーザーに「安心感」や「クリックしやすさ」を与えます。
モダンなデザイン： 2026年現在のトレンドでも、カードデザインやSNSのアイコンには欠かせない技術です。
直感的な指定： border-radius: 10px; のように、直感的に数字を入れるだけで反映されます。

【初心者向け】まずはここから！基本のサンプルコード

プログラミングが初めての方でも大丈夫です。まずは、以下のコードを見てみましょう。角を「15px」だけ丸くした、シンプルなボタン風のボックスを作ってみます。


<style>
    .simple-box {
        background-color: #f0f9ff; /* 背景色（薄い青） */
        border: 2px solid #007bff;   /* 枠線の太さと色 */
        padding: 20px;              /* 内側の余白 */
        width: 250px;               /* 横幅 */
        text-align: center;         /* 文字を真ん中に */
        
        /* ここが角丸の指定！ */
        border-radius: 15px;        
    }
</style>

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

ブラウザ表示

このように、border-radiusという一行を追加するだけで、無機質な四角形がぐっとオシャレになります。次のセクションでは、この数字をどう変えると形が変化するのか、より詳しく見ていきましょう。

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%;をつければ、簡単に丸いアイコンやアバターが作れます。