📌 این ویژگی مشخص می‌کنه که رنگ حاشیه (border) یک عنصر چه رنگی باشد.
در Tailwind از کلاس‌های border-{color} استفاده می‌کنیم.

✅ کلاس‌ها

• border-black → حاشیه سیاه

• border-white → حاشیه سفید

• border-gray-500 → حاشیه خاکستری

• border-red-500 → حاشیه قرمز

• border-green-500 → حاشیه سبز

• border-blue-500 → حاشیه آبی

• border-yellow-500 → حاشیه زرد

📌 می‌توان از رنگ دلخواه هم استفاده کرد:

• border-[#ff5733] → رنگ HEX دلخواه

✅ مثال

<div class="w-32 h-16 border-4 border-black mb-2">
  حاشیه سیاه
</div>

<div class="w-32 h-16 border-4 border-red-500 mb-2">
  حاشیه قرمز
</div>

<div class="w-32 h-16 border-4 border-green-500 mb-2">
  حاشیه سبز
</div>

<div class="w-32 h-16 border-4 border-[#ff5733] mb-2">
  حاشیه رنگ دلخواه
</div>

📌 نکات مهم

• اغلب همراه با border-width و border-style استفاده می‌شود.

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

  • sm:border-red-500 md:border-blue-500 → موبایل قرمز، دسکتاپ آبی