Borders and Shadows

🧑‍🏫 Sabse pehle — simple mein samjho#

Card design karte waqt do cheezein usko premium look deti hain: gol kinare (Rounded corners) aur parchhai (Shadows). Tailwind ne inhe add karna bahut hi asaan bana diya hai. Tum rounded-lg se kone gol kar sakte ho, shadow-md se card ko thoda 3D look de sakte ho, aur agar border lagana ho toh sirf border class likho aur color de do (border-gray-200).

Borders#

Creating a border requires three classes: one to enable the border, one for thickness, and one for color.

• Enable Border: border (applies a 1px solid border to all sides)
  • Specific sides: border-t (top), border-b (bottom), border-l, border-r.
• Thickness: border-2, border-4, border-8.
• Color: border-gray-300, border-blue-500 (Uses the standard color palette).

Border Radius (Rounded Corners)#

• rounded-none (Sharp corners - default)
• rounded-sm
• rounded (The standard subtle rounding)
• rounded-md
• rounded-lg, rounded-xl, rounded-2xl, rounded-3xl
• rounded-full (Used to create perfect circles for avatars, assuming width and height are equal)

You can also round specific corners: rounded-t-lg (top-left and top-right), rounded-tl-lg (top-left only).

Box Shadows#

Shadows add depth and hierarchy to your UI.

• shadow-sm (Very subtle, great for small buttons)
• shadow (Default drop shadow)
• shadow-md, shadow-lg, shadow-xl, shadow-2xl (Great for modals and floating dropdowns)
• shadow-none (Removes existing shadows)
• shadow-inner (An inset shadow, making the element look pressed in)

Rings (Focus Outlines)#

While shadows are great for depth, Rings are specifically designed for focus states (accessibility) or creating glowing effects without overriding the box-shadow property.

• ring (Enables the ring)
• ring-2 (Ring thickness)
• ring-blue-500 (Ring color)
• ring-offset-2 (Adds a small gap between the element and the ring, which looks incredibly polished on dark backgrounds)

Divide (The Border Shortcut for Lists)#

If you have a flex column of items and you want a 1px border between each item, you don't need to apply border-b to every single child. Instead, apply divide-y to the parent!

<!-- Try modifying rounded-2xl, shadow-lg, or divide-gray-200! -->
<div class="max-w-md mx-auto bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden">
  <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
    <h3 class="font-bold text-gray-900 m-0">Recent Activity</h3>
  </div>
  <!-- Divide creates borders between items automatically -->
  <ul class="divide-y divide-gray-100 m-0 p-0">
    <li class="px-6 py-4 flex items-center justify-between hover:bg-blue-50 transition cursor-pointer">
      <div class="flex items-center gap-3">
        <div class="w-2 h-2 rounded-full bg-green-500 ring-4 ring-green-100"></div>
        <span class="font-medium text-gray-700">Database Backup</span>
      </div>
      <span class="text-xs text-gray-400">10m ago</span>
    </li>
    <li class="px-6 py-4 flex items-center justify-between hover:bg-blue-50 transition cursor-pointer">
      <div class="flex items-center gap-3">
        <div class="w-2 h-2 rounded-full bg-blue-500 ring-4 ring-blue-100"></div>
        <span class="font-medium text-gray-700">User Registered</span>
      </div>
      <span class="text-xs text-gray-400">2h ago</span>
    </li>
    <li class="px-6 py-4 flex items-center justify-between hover:bg-blue-50 transition cursor-pointer">
      <div class="flex items-center gap-3">
        <div class="w-2 h-2 rounded-full bg-rose-500 ring-4 ring-rose-100"></div>
        <span class="font-medium text-gray-700">Server Error</span>
      </div>
      <span class="text-xs text-gray-400">1d ago</span>
    </li>
  </ul>
</div>