Borders & Shadows

Borders and Shadows in Tailwind

Borders:

• border — 1px solid (default color)
• border-2, border-4, border-8 — thickness
• border-gray-300, border-blue-500 — color

Border radius:

• rounded-none — no radius
• rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl
• rounded-full — pill / circle

Shadows:

• shadow-sm — subtle shadow
• shadow — small shadow
• shadow-md — medium shadow
• shadow-lg — large shadow
• shadow-xl, shadow-2xl — very large
• shadow-none — remove shadow
• shadow-inner — inset shadow

<div class="border-2 border-blue-500 rounded-xl shadow-lg p-4">
  Styled card
</div>

Your Task

Create 4 elements demonstrating different border styles, rounded corners, and shadow depths.