📌 این ویژگی مشخص می‌کنه که گوشه‌های یک عنصر گرد یا منحنی شوند.
در Tailwind از کلاس‌های rounded-* استفاده می‌کنیم.

✅ کلاس‌ها

• rounded-none → بدون شعاع گرد

• rounded-sm → گوشه کمی گرد

• rounded → گوشه پیش‌فرض گرد

• rounded-md → گوشه متوسط

• rounded-lg → گوشه بزرگ

• rounded-xl → گوشه خیلی بزرگ

• rounded-2xl → گوشه بسیار بزرگ

• rounded-3xl → گوشه خیلی بسیار بزرگ

• rounded-full → گوشه کاملاً گرد (دایره/بیضی)

📌 همچنین می‌توان گوشه‌های خاص را جداگانه گرد کرد:

• rounded-t → فقط گوشه‌های بالایی

• rounded-b → فقط گوشه‌های پایینی

• rounded-l → فقط گوشه‌های چپ

• rounded-r → فقط گوشه‌های راست

• rounded-tl, rounded-tr, rounded-bl, rounded-br → گوشه خاص

✅ مثال

<div class="w-32 h-16 bg-blue-500 rounded-none mb-2">
  بدون گرد
</div>

<div class="w-32 h-16 bg-green-500 rounded mb-2">
  گرد پیش‌فرض
</div>

<div class="w-32 h-16 bg-red-500 rounded-lg mb-2">
  گرد بزرگ
</div>

<div class="w-32 h-16 bg-yellow-500 rounded-full mb-2">
  کاملاً گرد
</div>

<div class="w-32 h-16 bg-purple-500 rounded-tl-lg rounded-br-lg mb-2">
  گوشه‌های خاص گرد
</div>

📌 نکات مهم

• rounded-full برای دایره‌ها و آیکون‌ها بسیار کاربردی است.

• می‌توان با responsive ترکیب کرد:

  • sm:rounded-md md:rounded-xl → موبایل گوشه متوسط، دسکتاپ گوشه بزرگ