# border-radius

> 要素の角を丸くするプロパティです。4つの角を個別に指定できるほか、楕円形の角も作成可能です。円形のボタンやカードデザインに欠かせないプロパティで、単位はpx、%、emなど多様な値が使用できます。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/border-radius/

## 構文

```css
border-radius: <length> | <percentage>
```

## Tailwindでは

- `rounded-sm` → border-radius: 4px
- `rounded-md` → border-radius: 6px
- `rounded-lg` → border-radius: 8px
- `rounded-full` → border-radius: 9999px
- 任意値: `rounded-[10px]`
- 補足: v4でスケール名が変更: v3のrounded→rounded-sm、rounded-sm→rounded-xsに改名。角ごとの指定は rounded-t-* / rounded-tl-* など。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 4+ / Firefox 4+ / Safari 5+ / Edge 12+

## コード例

### 例1: 角の丸みなし（デフォルト）

```css
border-radius: 0px;
```

### 例2: 中程度の丸み

```css
border-radius: 16px;
```

### 例3: 完全な円形（正方形の場合）

```css
border-radius: 50%;
```

## TIPS

カードデザインやボタンで必須のプロパティ。

## AIがよく間違えるポイント

AIは「完全な丸ゴマ/ピル形」にborder-radius: 50%を使うことがありますが、50%は楕円になるため、ピル形には9999pxや calc(infinity * 1px) が正解です（正円なら50%でOK）。角丸の入れ子（親と子の半径調整）もAIが省略しがちな仕上げポイントです。

## AIへの依頼文例

- このボタンをピル形（カプセル形）にしたい。50%だと楕円になる問題を回避して実装して
- カードとその中の画像の角丸を、入れ子でも自然に見えるよう半径を調整して

## 関連プロパティ

- [border](https://www.css-dictionary.com/property/border.md)