Borders, rounded corners and shadows

Borders, rounded corners and shadows separate a card from the background and make buttons look like buttons. Tailwind has a short scale of values for each of these properties.

Border

border adds a 1-pixel border, border-2 and border-4 are thicker. Sides are picked the same way as for spacing: border-t, border-b-2. The color is a separate class:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="border border-gray-300 p-3">A gray border all around</p>
<p class="mt-3 border-l-4 border-indigo-500 p-3">An accent bar on the left</p>

The first paragraph is outlined with a light gray line, the second has a thick blue bar on the left, like a quote.

Dividers

divide-y draws a line between neighbouring list items — no need to remove the border from the last one:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<ul class="w-64 divide-y divide-gray-200 border border-gray-200">
  <li class="p-3">Headphones — $79</li>
  <li class="p-3">Speaker — $45</li>
  <li class="p-3">Charger — $19</li>
</ul>

Rounded corners

To round only some corners: rounded-t-xl for the top ones, rounded-l-lg for the left ones.

Shadows

Shadows range from shadow-2xs to shadow-2xl, and shadow-none removes the shadow. Let us build the frame of the product card:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="max-w-xs overflow-hidden rounded-xl bg-white shadow-lg">
  <img src="/media/photo-400x250.jpg" alt="Headphones" class="h-40 w-full object-cover">
  <div class="p-4">
    <h2 class="font-semibold">Wireless headphones</h2>
    <p class="text-gray-600">$79</p>
  </div>
</div>

A card with rounded corners and a soft shadow. overflow-hidden clips the image corners to the card's radius; otherwise they would stick out.

Ring

ring- draws an outline with a shadow: it does not change the element's size or push its neighbours. It is often used for highlighting: ring-2 ring-indigo-500. A ring is especially useful on focus — see the lesson on states.

Common mistake

Writing only border and expecting a light gray line:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="border p-3 text-gray-900">A border in the text color</div>

In Tailwind 4 a border without a color takes the text color — here it is almost black. Version 3 defaulted to gray, so older examples look different. Always add a color: border border-gray-200.