CSSボーダーラジウスジェネレーター：角丸デザインを完全マスター

角丸はウェブデザインの中で最もシンプルに見えて、実は奥が深いプロパティの一つです。border-radius: 4pxと書くだけでボタンが柔らかく見えますが、このプロパティには完全な円形、楕円、ブロブ状の有機的な形まで作れる豊かな表現力が隠れています。

このガイドではborder-radiusの全機能を解説し、CSSボーダーラジウスジェネレーターを使って複雑な値を素早く試す方法も紹介します。

border-radiusとは何か

border-radiusはCSSのプロパティで、要素の角を丸くします。実際には4つの角それぞれに水平半径と垂直半径の2つの値を設定できるため、最大8つの値を持つ複雑なプロパティです。

基本的な使い方から始めましょう。

/* 全角に同じ半径を適用 */
.box {
  border-radius: 8px;
}

/* 各角に異なる値（上左、上右、下右、下左の順） */
.box {
  border-radius: 8px 16px 24px 4px;
}

/* 個別のプロパティを使う場合 */
.box {
  border-top-left-radius: 8px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 4px;
}

pxと%：どちらを使うべきか

border-radiusの値にはピクセル（px）やパーセント（%）、emなど様々な単位を使えます。それぞれに適した使いどころがあります。

pxを使うべき場面：

• ボタンやバッジなど固定サイズの要素
• デザインシステムで一貫した角丸トークンを使いたいとき（例：--radius-sm: 4px）
• 要素のサイズに関わらず同じ見た目の丸みを保ちたいとき

%を使うべき場面：

• 完全な円や楕円を作るとき（border-radius: 50%）
• 要素のサイズに比例して丸みを変えたいとき
• 有機的なブロブ形状を作るとき

重要な点：パーセント値は要素の幅と高さに対してそれぞれ計算されます。正方形の要素にborder-radius: 50%を設定すると完全な円になりますが、長方形に設定すると楕円になります。

よく使うパターン：ボタン

最も一般的な使用例はボタンです。適切なborder-radiusがUIの印象を大きく変えます。

/* シャープなボタン（0px） */
.btn-sharp {
  border-radius: 0;
}

/* 微妙に柔らかいボタン（4-6px） */
.btn-soft {
  border-radius: 4px;
}

/* モダンなボタン（8px） */
.btn-modern {
  border-radius: 8px;
}

/* ピル型ボタン（完全に丸い） */
.btn-pill {
  border-radius: 9999px; /* または50pxなど大きな値 */
}

ピル型ボタン（border-radius: 9999px）はSaaS製品のCTAに頻繁に使われます。50%を使わない理由は、横長のボタンに50%を指定すると楕円になってしまうからです。代わりに要素の高さの半分より大きな値を指定することで、どのアスペクト比でも常にピル型を保てます。

カードデザイン

カードコンポーネントには一般的に8〜16pxのborder-radiusが使われます。

.card {
  border-radius: 12px;
  overflow: hidden; /* 画像が角からはみ出ないよう */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

overflow: hiddenを忘れると、カード内の画像が丸めた角からはみ出てしまいます。これはよくある見落としです。

カードの特定の角だけを丸めたいケースもあります。例えばナビゲーションのドロップダウンメニューで、トリガーボタンに隣接する角をシャープにしたい場合：

.dropdown-menu {
  border-radius: 0 0 8px 8px; /* 下の2角だけ丸める */
}

.tab-panel {
  border-radius: 0 8px 8px 8px; /* 左上だけシャープ（タブの下に配置） */
}

完全な円を作る

アバター画像やアイコンバッジなど、円形の要素は幅広く使われます。

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

重要なのはwidthとheightを同じ値にすることです。異なる値にすると楕円になります。

有機的なブロブ形状：スラッシュ構文

border-radiusの最も高度な機能が、水平半径と垂直半径を別々に指定できるスラッシュ構文です。

/* スラッシュ前が水平半径、スラッシュ後が垂直半径 */
.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

この構文で自然な曲線を持つブロブ形状が作れます。ランディングページの装飾、アバターの背景、セクション区切りなどによく使われます。

手計算で理想の形を出すのは困難です。そこでCSSボーダーラジウスジェネレーターが役立ちます。スライダーを動かしながらリアルタイムでプレビューし、完成したCSSコードをコピーできます。

各値が何を意味するか理解しておくと便利です：

border-radius: TL TR BR BL / TL TR BR BL
               水平半径      / 垂直半径
（TL=上左、TR=上右、BR=下右、BL=下左）

アニメーションで角丸を動かす

border-radiusはCSSアニメーションとトランジションに対応しています。これを使うと印象的なモーション効果を作れます。

ホバーエフェクト

.btn {
  border-radius: 4px;
  transition: border-radius 0.3s ease;
}

.btn:hover {
  border-radius: 12px;
}

このシンプルなトランジションでボタンにインタラクティブな質感が生まれます。

形を変化させるアニメーション

@keyframes morphShape {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

.animated-blob {
  animation: morphShape 8s ease-in-out infinite;
}

ブロブをゆっくりアニメーションさせることで、ページに有機的な生き生きとした動きを加えられます。パフォーマンス的にもborder-radiusのアニメーションは比較的安全です（GPUで処理できます）。

正方形から円へのトランジション

.shape {
  width: 100px;
  height: 100px;
  border-radius: 0;
  transition: border-radius 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shape.active {
  border-radius: 50%;
}

cubic-bezierを使ったバウンス効果で、形の変化に弾力感を加えています。

デザインシステムでの活用

プロジェクト全体で一貫した角丸を保つには、CSS変数（カスタムプロパティ）を使うのがベストプラクティスです。

:root {
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}

.btn { border-radius: var(--radius-sm); }
.card { border-radius: var(--radius-lg); }
.avatar { border-radius: var(--radius-full); }

Tailwind CSSを使っている場合はrounded-sm、rounded-lg、rounded-fullなどのユーティリティクラスが同じ概念を実装しています。

ブラウザ互換性について

border-radiusは現代のすべてのブラウザで完全にサポートされています。Internet Explorer 9以降でも動作します（ただしスラッシュ構文は一部制限あり）。今日のプロジェクトでは互換性を心配する必要はほとんどありません。

ジェネレーターを使うメリット

手で値を計算しながらブロブ形状を作るのは非常に時間がかかります。CSSボーダーラジウスジェネレーターを使えば：

• 8つの半径値をスライダーで直感的に調整できる
• リアルタイムプレビューで結果を即確認できる
• 生成されたCSSコードをワンクリックでコピーできる
• プリセットから始めてカスタマイズできる

特に有機的な形を作る際に、試行錯誤の時間を大幅に短縮できます。

まとめ

border-radiusは一見シンプルですが、正しく理解すると表現の幅が大きく広がります。基本的な角丸ボタンから有機的なブロブアニメーションまで、一つのプロパティで実現できます。

• 小さな固定値（4〜8px）：ボタンやバッジに
• 中程度の値（12〜16px）：カードや大きなコンポーネントに
• 50%：円形や楕円に
• 9999px：ピル型ボタンに
• スラッシュ構文 + %：ブロブや有機的な形に
• CSSアニメーション：形態変化のモーションに

CSSボーダーラジウスジェネレーターを開いて、実際にスライダーを動かしながら感覚をつかんでみてください。コードを読むよりも、視覚的に試した方がはるかに理解が深まります。