【2026年版】CSS border-radiusで角丸を作る方法｜円・楕円・一部だけ丸くをコピペで実装

2026年7月14日

Webサイトやアプリを作っていると、「角を丸くしたい」「正円にしたい」「ボタンだけ丸く」という場面が必ず出てきます。CSSの border-radius プロパティはたった1行で実現できますが、4値・8値・スラッシュ記法など、書き方のバリエーションが多く、最初は混乱しがちです。

この記事では、border-radius の基本から応用まで、コピペで動く完全なサンプルコードとともに丁寧に解説します。「なぜ角丸にならないのか」という失敗事例も取り上げているので、ぜひ最後まで読んでみてください。

初心者でも手を動かしながら理解できるように、HTML・CSS両方の完成コードを掲載しています。ブラウザで動作確認しながら進めてみてください。

先に、この記事の結論をまとめます。

border-radius: 8px; でシンプルな角丸が作れる
border-radius: 50%; で正円・楕円が作れる
4値で四隅を個別指定、スラッシュで水平・垂直を別々に設定できる
overflow: hidden; との組み合わせで画像の角丸を正しく制御できる

border-radius の基本

border-radius は、要素の角を丸くするCSSプロパティです。値には px・%・em など様々な単位が使えます。まずはもっともシンプルな書き方から確認しましょう。

最もシンプルな角丸（全隅に同じ値）

下記のように書くと、要素の4つ全ての角が同じ半径で丸くなります。

/* 全隅を 8px の丸みにする */
.box {
  border-radius: 8px;
}

コピペで動く完全なサンプルコードは以下のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>border-radius 基本サンプル</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: #d16176;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

上記をブラウザで開くと、ピンク色の角丸ボックスが表示されます。border-radius の値を大きくするほど角の丸みが増します。

値の単位による見た目の違い

px はピクセル値で固定された丸みを設定します。% は要素のサイズに対する割合なので、要素が大きくなると丸みも大きくなります。小さなボタンには px、全体的にまるっとしたデザインには % が使いやすいです。

/* px 指定：固定の丸み */
.box-px {
  border-radius: 16px;
}

/* % 指定：要素サイズに比例 */
.box-percent {
  border-radius: 20%;
}

border-radius: 50% で正円・楕円を作る

border-radius: 50%; は、要素の縦横どちらの辺に対しても50%の半径を適用します。幅と高さが同じ正方形に適用すると正円になり、縦横比が異なる長方形に適用すると楕円になります。

正円を作るコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>正円サンプル</title>
  <style>
    .circle {
      width: 120px;
      height: 120px;        /* 幅と高さを同じにする */
      background-color: #d16176;
      border-radius: 50%;  /* 正円 */
    }
  </style>
</head>
<body>
  <div class="circle"></div>
</body>
</html>

ポイントは width と height を同じ値にすること。どちらかが異なると楕円になります。

楕円を作るコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>楕円サンプル</title>
  <style>
    .ellipse {
      width: 200px;
      height: 100px;       /* 幅と高さを異なる値にする */
      background-color: #EFBDB7;
      border-radius: 50%;  /* 楕円 */
    }
  </style>
</head>
<body>
  <div class="ellipse"></div>
</body>
</html>

四隅を個別に指定する（4値と8値のスラッシュ記法）

border-radius は1〜4つの値を受け取ることができます。指定の順番は 左上・右上・右下・左下（時計回り）です。

4値で四隅を個別に設定

/* 左上:8px / 右上:16px / 右下:32px / 左下:4px */
.box {
  border-radius: 8px 16px 32px 4px;
}

値の数によって適用のされ方が変わります。

値の数	適用ルール	例
1値	全角に同じ値	border-radius: 8px
2値	左上・右下 / 右上・左下	border-radius: 8px 16px
3値	左上 / 右上・左下 / 右下	border-radius: 8px 16px 4px
4値	左上 / 右上 / 右下 / 左下（時計回り）	border-radius: 8px 16px 32px 4px

スラッシュ記法（8値）で水平・垂直を別々に設定

/（スラッシュ）を使うと、水平方向の半径と垂直方向の半径を別々に指定できます。これにより、より複雑な曲線の角丸を作れます。

/* 水平半径 / 垂直半径 */
.box {
  border-radius: 40px / 20px;
}

/* 各角を個別に水平・垂直を指定 */
.box-complex {
  border-radius: 40px 20px 30px 10px / 20px 40px 10px 30px;
}

スラッシュの左が水平方向（左右の半径）、右が垂直方向（上下の半径）です。デザインの凝ったカードや装飾的な要素に使われます。

個別プロパティで1つの角だけ指定

ショートハンドではなく、個別プロパティでも角を指定できます。他の角はデフォルトのまま、1つの角だけを変えたいときに便利です。

/* 個別プロパティ */
.box {
  border-top-left-radius: 16px;     /* 左上 */
  border-top-right-radius: 16px;    /* 右上 */
  border-bottom-right-radius: 4px;  /* 右下 */
  border-bottom-left-radius: 4px;   /* 左下 */
}

一部だけ角丸にする（上だけ・左だけ）

ナビゲーションタブや吹き出し風デザインでは「上の2角だけ丸くしたい」「左の2角だけ丸くしたい」というケースがよくあります。

上の2角だけ丸くする

/* 上の2角だけ丸くする */
.tab {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  /* 下の2角は 0（デフォルト）のまま */
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>上だけ角丸サンプル</title>
  <style>
    .tab {
      display: inline-block;
      padding: 8px 24px;
      background-color: #d16176;
      color: #fff;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }
  </style>
</head>
<body>
  <div class="tab">タブA</div>
</body>
</html>

左の2角だけ丸くする

/* 左の2角だけ丸くする */
.left-rounded {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

右の2角だけ丸くする（ピルボタンの片側）

/* 右の2角だけ丸くする */
.right-rounded {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

999px のような大きな値を指定すると、要素の高さに関係なく完全な半円になります。カプセル型ボタンの片側だけに使うパターンです。

画像・ボタン・カードへの応用実例

ここからは実際のUI部品へ適用するパターンを、コピペで動く完全コードで紹介します。

角丸ボタン（ピルボタン）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ピルボタン</title>
  <style>
    .btn-pill {
      display: inline-block;
      padding: 12px 32px;
      background-color: #d16176;
      color: #fff;
      font-size: 16px;
      font-family: "ヒラギノ角ゴ Pro", Meiryo, "游ゴシック", sans-serif;
      text-decoration: none;
      border: none;
      border-radius: 999px;  /* カプセル型 */
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .btn-pill:hover {
      opacity: 0.8;
    }
  </style>
</head>
<body>
  <a class="btn-pill" href="#">無料で始める</a>
</body>
</html>

角丸カード（シャドウつき）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カードコンポーネント</title>
  <style>
    body {
      font-family: "ヒラギノ角ゴ Pro", Meiryo, "游ゴシック", sans-serif;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    .card {
      width: 320px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      overflow: hidden;  /* 画像が角丸の外にはみ出さないように */
    }
    .card-image {
      width: 100%;
      height: 180px;
      background-color: #EFBDB7;
      object-fit: cover;
    }
    .card-body {
      padding: 20px;
    }
    .card-title {
      font-size: 18px;
      font-weight: bold;
      color: #51322b;
      margin: 0 0 8px;
    }
    .card-text {
      font-size: 14px;
      color: #666;
      line-height: 1.7;
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="card">
    <img class="card-image" src="https://placehold.co/320x180" alt="サンプル画像">
    <div class="card-body">
      <h2 class="card-title">カードタイトル</h2>
      <p class="card-text">border-radiusとoverflow:hiddenを組み合わせることで、角丸カードの中の画像もきれいに丸くなります。</p>
    </div>
  </div>
</body>
</html>

プロフィールアイコン（正円の画像）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>プロフィールアイコン</title>
  <style>
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;   /* 画像を正方形にトリミング */
      border: 3px solid #d16176;
    }
  </style>
</head>
<body>
  <img class="avatar" src="https://placehold.co/80x80" alt="プロフィール">
</body>
</html>

object-fit: cover; を合わせて使うと、縦横比が違う画像でも正方形にトリミングしてから角丸を適用できます。

overflow: hidden との組み合わせ（画像はみ出し対策）

カードや角丸コンテナの中に <img> を入れただけでは、画像が角丸の外にはみ出して四角のままに見えることがあります。これを防ぐには overflow: hidden; を親要素に指定します。

なぜ overflow: hidden が必要なのか

/* NG：画像が角丸をはみ出す */
.card-bad {
  border-radius: 16px;
  /* overflow の指定なし */
}

/* OK：overflow: hidden で子要素が角丸に収まる */
.card-good {
  border-radius: 16px;
  overflow: hidden;
}

border-radius は親要素自体の角を丸くしますが、子要素（画像）は親の形状に自動的に従いません。overflow: hidden; を加えることで、子要素が親の角丸の外に出た部分を切り取ってくれます。

完全なコピペサンプル（OK vs NG の比較）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>overflow:hidden 比較サンプル</title>
  <style>
    .wrapper {
      display: flex;
      gap: 32px;
      padding: 32px;
    }
    .card {
      width: 200px;
      border-radius: 16px;
      border: 2px solid #d16176;
    }
    .card-ok {
      overflow: hidden; /* これがあると画像が角丸に収まる */
    }
    .card img {
      width: 100%;
      display: block;
    }
    .label {
      padding: 8px;
      text-align: center;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="card">
      <img src="https://placehold.co/200x120" alt="NG例">
      <div class="label">NG：overflow なし</div>
    </div>
    <div class="card card-ok">
      <img src="https://placehold.co/200x120" alt="OK例">
      <div class="label">OK：overflow: hidden あり</div>
    </div>
  </div>
</body>
</html>

border-radius 値の指定早見表

よく使うパターンをまとめました。コードをそのままコピペして使えます。

用途	CSS	備考
軽い角丸（カード・入力欄）	border-radius: 4px	ほんの少しだけ角を丸くする
中程度の角丸（カード）	border-radius: 8px〜16px	一般的なカードデザイン
大きな角丸（目立たせる）	border-radius: 24px〜32px	モーダルや大型カードに
カプセル型ボタン	border-radius: 999px	高さに依存しない完全な楕円形
正円	border-radius: 50%（width=height）	アイコンやアバターに
楕円	border-radius: 50%（width≠height）	幅広ボタンなどに
上だけ角丸	border-top-left-radius + border-top-right-radius	タブUIに
有機的な形	border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%	流体デザイン・装飾

有機的（オーガニック）な角丸の作り方

スラッシュ記法と8値を組み合わせると、自然な流体のような有機的な形を作れます。デザイン性の高いLPや装飾的な背景に使われるテクニックです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>オーガニック角丸</title>
  <style>
    .blob {
      width: 200px;
      height: 200px;
      background-color: #EFBDB7;
      /* 左上:60% 右上:40% 右下:30% 左下:70% / 上:60% 右:30% 下:70% 左:40% */
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      animation: morph 6s ease-in-out infinite;
    }
    @keyframes morph {
      0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
      50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    }
  </style>
</head>
<body>
  <div class="blob"></div>
</body>
</html>

@keyframes と組み合わせると、形が変化し続けるアニメーションになります。背景装飾やアクセント要素として使うと印象的です。

よくある失敗（角丸にならない原因）

「border-radius を書いたのに角が丸くならない」という問題には、いくつかのよくある原因があります。チェックリストで確認してみましょう。

原因1：要素に border がなくて見えていない

border-radius は背景色・背景画像・ボーダーに対して効きます。背景もボーダーも何もない透明な要素では、見た目上は変わりません。要素に背景色かボーダーを設定してみましょう。

/* 背景色がないと角丸が見えない */
.invisible {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* background が何もないので見えない */
}

/* 背景色を追加すれば見える */
.visible {
  width: 100px;
  height: 100px;
  background-color: #d16176;
  border-radius: 50%;
}

原因2：子要素の画像・背景が角丸の外にはみ出ている

前述のとおり、親に border-radius を設定しても、子要素はその形状に自動的に従いません。overflow: hidden; を親に追加することで解決します。

原因3：table 要素に直接 border-radius を使っている

<table> に border-radius を適用するには、border-collapse: separate; にする必要があります。border-collapse: collapse;（デフォルト）では角丸が効きません。

/* テーブルに角丸を効かせるには separate が必要 */
table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}

原因4：display: inline のままになっている

<span> などの display: inline 要素は、border-radius の効き方が不安定になることがあります。display: inline-block; または display: block; に変更してみましょう。

/* inline 要素は border-radius が効きにくい */
.badge-bad {
  display: inline; /* NG */
  border-radius: 4px;
}

/* inline-block にすれば OK */
.badge-good {
  display: inline-block; /* OK */
  border-radius: 4px;
  padding: 2px 8px;
}

原因5：値に単位をつけ忘れている

0以外の値に単位をつけ忘れると、プロパティが無効になります。border-radius: 8; ではなく、必ず border-radius: 8px; または border-radius: 50%; のように単位をつけてください。

/* NG：単位なし */
.box-bad {
  border-radius: 8;  /* 無効 */
}

/* OK：単位あり */
.box-good {
  border-radius: 8px; /* 有効 */
}

レスポンシブ対応での border-radius の注意点

スマートフォン向けレイアウトでは、px の固定値より % や vw を使ったほうが画面サイズに比例した丸みになります。大きな角丸を固定値で指定すると、小さい画面では要素の高さを超えてしまい、想定外の見た目になることがあります。

/* PC では大きな角丸、スマホでは小さく調整 */
.card {
  border-radius: 16px;
}

@media (max-width: 640px) {
  .card {
    border-radius: 8px;
  }
}

よくある質問（FAQ）

Q. border-radius と border-radius の個別プロパティはどちらを使うべきですか？

全隅に同じ値を設定するときや2〜4値のショートハンドで済む場合は border-radius ショートハンドが簡潔です。特定の1〜2角だけを変えたい場合は、意図が明確になるため border-top-left-radius などの個別プロパティを使うのがおすすめです。

Q. border-radius: 50% と border-radius: 100% の違いは何ですか？

ほとんどのケースで見た目は同じです。50% が正式な「半径 = 要素サイズの半分」という計算になり、正円・楕円を作るには 50% を使うのが標準的です。100% は最終的に 50% に補正されるブラウザがほとんどです。

Q. アニメーションで border-radius を変化させても大丈夫ですか？

はい、CSSの transition や @keyframes で border-radius をアニメーション可能です。ただし、border-radius の変化はブラウザの再描画（repaint）を引き起こします。大量の要素に同時に使うとパフォーマンスに影響する場合があるため、必要な要素だけに限定して使いましょう。

Q. SVG要素にも border-radius は使えますか？

SVG要素のうち、HTMLとしてレンダリングされる <svg> タグ自体には border-radius を適用できます。ただし、SVG内部の <rect> などの要素には rx・ry 属性を使って角丸を設定します。

<!-- SVG rect の角丸は rx/ry 属性で設定 -->
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="180" height="80"
        rx="16" ry="16"
        fill="#d16176" />
</svg>

Q. border-radius を使うと要素のサイズが変わりますか？

border-radius はレイアウトには影響しません。要素の width・height・margin・padding は変化せず、見た目の形だけが変わります。したがって、border-radius を追加しても周囲のレイアウトが崩れることはありません。

まとめ

この記事では CSS の border-radius について、基本から応用まで解説しました。

border-radius: 8px; のような単純な値から始めて、デザインの要件に合わせて細かく調整する
正円には border-radius: 50% を width=height の要素に適用する
4値・8値（スラッシュ記法）で各角を個別に制御できる
画像や子要素が角丸をはみ出す場合は overflow: hidden; を親に追加する
ボタン・カード・アバターなど様々なUIに応用できる

ここで紹介したサンプルコードはすべてコピペで動作確認できます。実際に手を動かして、デザインに border-radius を取り入れてみましょう。

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

【CSS実装テクニック完全マップ】コピペで使えるWebデザイン実装ガイド総まとめ

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

期間：1週間
学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

公式サイトから無料カウンセリングに申し込む →

この記事を書いた人

田中誠

WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。