الحدود والاستدارة

<div class="border">حدّ افتراضي</div>
<div class="border-2 border-purple-500">سماكة ولون</div>
<div class="border-b border-gray-300">أسفل فقط</div>

<div class="rounded">استدارة خفيفة</div>
<div class="rounded-lg">أكبر</div>
<div class="rounded-full">دائري كامل</div>
<div class="rounded-t-xl">أعلى فقط</div>

<button class="ring-2 ring-purple-500 ring-offset-2">
  زر بحلقة
</button>
<input class="focus:ring-2 focus:ring-blue-400" />

<div class="shadow">ظلّ خفيف</div>
<div class="shadow-lg">أكبر</div>
<div class="shadow-xl hover:shadow-2xl">يكبر عند المرور</div>

<div class="rounded-2xl border border-gray-200 shadow-md p-6">
  بطاقة أنيقة
</div>