CSS Tips | 超実務コアCSSテクニック：ボックスモデル － border-radius応用

Web APP CSS
スポンサーリンク

border-radius 応用を理解すると「角のデザイン」で一気にプロっぽくなる

border-radius は「角を丸くする」だけじゃなく、
カード・バッジ・吹き出し・ピル型ボタン・円形サムネイルなど、
UI の印象をガラッと変える“デザインのスイッチ”です。

ここでは、基本から一歩進んだ応用まで、CSS と Tailwind CSS 両方で解説します。

基本の border-radius と Tailwind の対応

まずは「全部の角を同じだけ丸める」

.box {
  border-radius: 8px;
}
CSS

Tailwind ではこうなります。

<div class="rounded-lg"></div>
HTML

よく使うサイズ感のイメージはこんな感じです。

border-radius: 4px;   /* 小さめ、控えめ */
border-radius: 8px;   /* 標準的なカード */
border-radius: 9999px;/* ピル型・完全な丸 */
CSS

Tailwind だと

rounded      <!-- 小さめ -->
rounded-lg   <!-- 少し大きめ -->
rounded-full <!-- 完全な丸 -->
HTML

片側だけ丸める（カード・タブ・モーダルの定番）

CSS での方向指定

.box {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
CSS

上だけ丸めるパターンです。

.box {
  border-radius: 16px 16px 0 0; /* 左上 右上 右下 左下 */
}
CSS

Tailwind での方向指定

<div class="rounded-t-2xl"></div>      <!-- 上だけ -->
<div class="rounded-b-lg"></div>       <!-- 下だけ -->
<div class="rounded-l-full"></div>     <!-- 左だけピル型 -->
<div class="rounded-tr-3xl"></div>     <!-- 右上だけ -->
HTML

「どの角をどれくらい丸めるか」を意識すると、
カード・モーダル・タブの“キャラクター”が作れます。

円形サムネイル・アバターを作る

CSS版

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
CSS

Tailwind版

<img src="user.jpg" class="w-16 h-16 rounded-full object-cover">
HTML

ここでのポイントは
border-radius: 50%（Tailwind なら rounded-full）と
object-fit: cover のセットです。

これで「どんな比率の画像でも綺麗な丸」にできます。

ピル型ボタン・ラベルを作る

CSS版

.pill {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 9999px;
  background: #3182ce;
  color: #fff;
}
CSS

Tailwind版

<span class="inline-block px-4 py-1 rounded-full bg-blue-600 text-white">
  ラベル
</span>
HTML

border-radius: 9999px（Tailwind の rounded-full）は
「高さより十分大きい値を入れて完全に丸める」というテクニックです。

画像トリミングと border-radius の組み合わせ

角丸カード＋画像

.card {
  border-radius: 16px;
  overflow: hidden;
}
.card img {
  width: 100%;
  display: block;
}
CSS

Tailwind版

<div class="rounded-2xl overflow-hidden">
  <img src="photo.jpg" class="w-full block">
</div>
HTML

ここでの重要ポイントは overflow: hidden。
border-radius だけだと、中の画像が角からはみ出すことがあります。
overflow: hidden をセットにすると「角丸マスク」のように振る舞います。

非対称な角丸で“ちょっとおしゃれ”にする

CSS版

.card {
  border-radius: 24px 8px 24px 8px; /* 左上 右上 右下 左下 */
}
CSS

左右で丸みを変えると、
「ちょっとクセのある」デザインになります。

Tailwind版（任意値を使う）

<div class="rounded-[24px_8px_24px_8px] border border-gray-300 p-4">
  非対称な角丸カード
</div>
HTML

Tailwind の rounded-[...] は
「そのまま CSS の値を入れられる」強力な逃げ道です。

border-radius とボックスモデルの関係を少し深掘り

1. border-radius は border と一緒に使うと映える

枠線があると、角丸がよりはっきり見えます。

.box {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
CSS

Tailwind

<div class="rounded-xl border border-gray-300">
HTML

角丸＋薄いボーダーは「カード」「モーダル」「入力欄」の鉄板コンボです。

2. overflow とセットで「マスク」として使う

画像・背景色・子要素を角丸の中に閉じ込めたいときは、
必ず overflow: hidden をセットで考えます。

.wrapper {
  border-radius: 16px;
  overflow: hidden;
}
CSS

Tailwind

<div class="rounded-2xl overflow-hidden">
HTML

これを覚えると「角丸カードの中に画像を綺麗に収める」が一気に簡単になります。

3. 小さい角丸と大きい角丸の“印象の違い”

小さめ（4px〜6px）
→ きっちり・ビジネス・UI寄り

中くらい（8px〜16px）
→ 今っぽい・柔らかい・カード向き

大きめ（24px〜）
→ ポップ・フレンドリー・ブランド性強め

Tailwind だと

rounded-sm   <!-- かなり控えめ -->
rounded      <!-- 標準 -->
rounded-lg   <!-- 少し柔らかい -->
rounded-2xl  <!-- しっかり丸い -->
rounded-full <!-- ピル・円形 -->
HTML

「サービスの雰囲気」に合わせて radius を選ぶと、
デザイン全体のトーンが揃います。

実践テンプレート：よく使う3パターン

角丸カード（画像＋テキスト）

<div class="max-w-sm rounded-2xl overflow-hidden border border-gray-200 bg-white">
  <img src="photo.jpg" class="w-full h-40 object-cover">
  <div class="p-4">
    <h3 class="text-lg font-semibold mb-1">タイトル</h3>
    <p class="text-sm text-gray-600">説明テキストが入ります。</p>
  </div>
</div>
HTML

丸いアバター＋名前

<div class="flex items-center gap-3">
  <img src="user.jpg" class="w-12 h-12 rounded-full object-cover">
  <div>
    <p class="font-semibold">山田 太郎</p>
    <p class="text-sm text-gray-500">Web デザイナー</p>
  </div>
</div>
HTML

ピル型タグ

<span class="inline-block px-3 py-1 rounded-full bg-blue-50 text-blue-700 text-xs font-medium">
  デザイン
</span>
HTML

まとめ

border-radius は「角を丸める」だけでなく、
カード・アバター・ピル・マスク・非対称デザインなど、
UI の雰囲気を決める重要なパーツです。

CSS では
border-radius: 8px;
border-radius: 16px 16px 0 0;
border-radius: 50%;

Tailwind では
rounded / rounded-lg / rounded-2xl / rounded-full
rounded-t-2xl / rounded-[24px_8px_24px_8px]

あたりを軸にすると、かなり表現の幅が広がります。

スポンサーリンク
タイトルとURLをコピーしました