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で角を丸くするには、border-radius（ボーダー・ラディウス）というプロパティを使います。「radius」とは「半径」という意味で、ボックスの角を「半径◯◯pxの円」に沿って削り取るようなイメージで考えると分かりやすくなります。

プログラミングに慣れていない方でも、まずは「角をどれくらい丸めるか」を数字で指定するだけでOKです。具体的な書き方を見てみましょう。


<style>
.sample-box {
    border: 2px solid #007bff; /* 枠線の太さと色を指定 */
    border-radius: 15px;       /* 角の丸みを15ピクセルに設定 */
    padding: 20px;            /* 中の文字が見やすいように余白を作る */
    width: 250px;             /* 横幅を決める */
    text-align: center;       /* 文字を真ん中に寄せる */
    background-color: #f0f8ff; /* 背景を薄い青色にする */
}
</style>

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

ブラウザ表示

このように、border-radius: 15px;と記述するだけで、カチッとした四角形が柔らかい印象のデザインに変わります。

数値による変化のイメージ

この指定に使う数値（px）を変えることで、見た目を自由にコントロールできます。

数値を小さく（例: 4px）：ボタンなどによく使われる、ほんのりとした自然な丸み。
数値を大きく（例: 30px）：よりポップで親しみやすい、しっかりとしたカーブ。
50%を指定：正方形の要素に使えば、きれいな「円形」になります。

まずは「10px」や「20px」など、身近な数値を入れてブラウザでどう変わるか試してみるのが、上達への一番の近道ですよ。

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

CSSのborder-radiusプロパティは、1つの値を指定して全体の角を丸めるだけでなく、複数の値を組み合わせて「特定の角だけ」を丸くすることも可能です。プログラミング初心者の方でも分かりやすいよう、基本から応用まで、2026年現在のモダンなWebデザインでよく使われる指定パターンを詳しく解説します。

3-1. 全ての角を均等に丸くする（基本形）

もっとも一般的な指定方法です。値を1つだけ指定すると、四隅（左上・右上・右下・左下）すべてに同じ半径の丸みが適用されます。数値が大きくなるほど、角が緩やかなカーブになり、優しい印象のデザインになります。


<style>
.box-basic {
    border: 2px solid #28a745;
    border-radius: 20px; /* 四隅すべて20pxの角丸 */
    padding: 20px;
    width: 250px;
    text-align: center;
    background-color: #f9fff9;
}
</style>

<div class="box-basic">
    全ての角が均等に丸いボックス
</div>

ブラウザ表示

3-2. 特定の角だけを丸くする（個別指定）

border-radiusには、スペースで区切って最大4つの値を指定できます。指定する順番は「左上 → 右上 → 右下 → 左下」という時計回りのルールになっています。この仕組みを理解すると、付箋のようなデザインや、チャットの吹き出し、モダンなカードUIなどを自由自在に作ることができます。


<style>
.box-custom {
    border: 2px solid #dc3545;
    /* 左上: 40px, 右上: 0, 右下: 0, 左下: 0 */
    border-radius: 40px 0 0 0; 
    padding: 20px;
    width: 250px;
    text-align: center;
    background-color: #fff5f5;
}

.box-pill {
    border: 2px solid #007bff;
    /* 左上・右下を丸く、右上・左下を角張らせる */
    border-radius: 30px 0 30px 0;
    padding: 15px;
    width: 250px;
    margin-top: 20px;
    text-align: center;
}
</style>

<div class="box-custom">左上だけ大きな角丸</div>
<div class="box-pill">対角線だけ丸いデザイン</div>

ブラウザ表示

このように、角ごとに数値を微調整することで、画一的な四角形から脱却し、ユーザーの目を引く個性的なパーツを作成できます。まずは値を1つ変えるところから試して、見た目の変化を楽しんでみましょう。

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

CSSで「完全な正円」を作るのは、実はとても簡単です。基本ルールは、「正方形のボックスに対して border-radius を 50% に設定する」。たったこれだけです。 SNSのアイコンや、プロフィール画像など、Webサイトでよく見かける「丸いパーツ」のほとんどがこの仕組みで作られています。


<style>
.circle-box {
    width: 120px;            /* 幅を120pxに設定 */
    height: 120px;           /* 高さを120pxに設定（幅と同じにするのがポイント！） */
    background-color: #ff9800; /* オレンジ色の背景 */
    border-radius: 50%;      /* 全ての角を50%丸めることで円形にする */
    color: white;            /* 文字を白く */
    display: flex;           /* 文字を中央に寄せるための設定 */
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
</style>

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

ブラウザ表示

初心者の方が陥りやすい注意点として、元のボックスが長方形だと「楕円（だえん）」になってしまうという点があります。綺麗な円形にするためには、必ず width（幅）と height（高さ）を同じ数値にする必要があります。

画像を丸く切り抜く方法

写真などの画像（imgタグ）を丸くしたい場合も全く同じ方法でOKです。ただし、元の画像が正方形でない場合は object-fit: cover; を併用すると、画像が歪まずに綺麗に丸い枠に収まります。


<style>
.profile-img {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* 画像を丸くする */
    object-fit: cover;  /* 縦横比を保ったまま枠に収める */
    border: 3px solid #ddd; /* 枠線をつけて見栄えを良くする */
}
</style>

<img src="/img/sample120-120.jpg" alt="プロフィール画像" class="profile-img">

ブラウザ表示

このように border-radius は、背景色だけでなく画像に対しても適用できるため、非常に汎用性が高いテクニックです。

5. border-radiusの単位と使い分け（pxと%の違い）

角を丸くするborder-radiusを指定する際、初心者の方が一番迷うのが「単位」の使い方です。主に使われるpx（ピクセル）と%（パーセント）には、見た目の変化に大きな違いがあります。それぞれの特徴を実際のコードで比較してみましょう。

px（ピクセル）で指定する場合

pxは「固定値」です。ボタンの大きさに関わらず、常に一定の丸みをキープしたい時に最適です。例えば、スマホで見てもパソコンで見ても、角の丸み具合を変えたくないデザインに向いています。

%（パーセント）で指定する場合

％は、その要素（ボックス）の「横幅と高さ」を基準にした比率で決まります。特に「50%」を指定すると、正方形のボックスを完全な円形（丸）にできるのが特徴です。アイコン画像やプロフィール写真を丸く切り抜きたい時によく使われます。


<style>
    /* 10px：常に一定の小さな丸み */
    .box-px {
        width: 150px;
        height: 100px;
        background-color: #ffcccc;
        border: 2px solid #ff0000;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    /* 50%：要素の形に合わせて丸くなる（正方形なら円） */
    .box-percent {
        width: 120px;
        height: 120px;
        background-color: #cce5ff;
        border: 2px solid #004085;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<div class="box-px">10px指定</div>
<div class="box-percent">50%指定</div>

ブラウザ表示

初心者のためのポイント：
「角をちょっとだけ丸くしたい」ならpx、「完全に丸いボタンや円を作りたい」なら50%、と覚えておくとスムーズにデザインが作れるようになりますよ！