要素の角を丸くするプロパティです。4つの角を個別に指定できるほか、楕円形の角も作成可能です。円形のボタンやカードデザインに欠かせないプロパティで、単位はpx、%、emなど多様な値が使用できます。
border-radius: <length> | <percentage>| 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-* など。
.element {
border-radius: 16px;
}border-radius: 0px;角の丸みなし（デフォルト）
border-radius: 16px;中程度の丸み
border-radius: 50%;完全な円形（正方形の場合）
カードデザインやボタンで必須のプロパティ。
AIは「完全な丸ゴマ/ピル形」にborder-radius: 50%を使うことがありますが、50%は楕円になるため、ピル形には9999pxや calc(infinity * 1px) が正解です（正円なら50%でOK）。角丸の入れ子（親と子の半径調整）もAIが省略しがちな仕上げポイントです。
このボタンをピル形（カプセル形）にしたい。50%だと楕円になる問題を回避して実装して
カードとその中の画像の角丸を、入れ子でも自然に見えるよう半径を調整して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。