Tailwind CSS Tutorial · Tailwind Basics · Lesson 8 of 27

Borders, Radius, Shadows and Rings

Border width and colour, rounded corners, box shadows, rings for focus states, and dividers between items.

Create a free account to save this page, take notes and track your progress. Sign in

Borders and corners

border (1px), border-2, border-t-4; colour with border-gray-200; style with border-dashed.
Corners: rounded-xs, rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-full; one side or corner with rounded-t-lg, rounded-br-xl.

Shadows

shadow-2xs, shadow-xs, shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl. Coloured shadows: shadow-sky-500/50. Inner shadows: inset-shadow-sm. Text shadows (4.1+): text-shadow-md.

Borders and shadowsTry it yourself

<div class="grid grid-cols-2 gap-6 bg-gray-50 p-8 sm:grid-cols-4">
  <div class="h-20 rounded-md border-2 border-dashed border-gray-300 bg-white"></div>
  <div class="h-20 rounded-xl bg-white shadow-sm"></div>
  <div class="h-20 rounded-2xl bg-white shadow-xl"></div>
  <div class="h-20 rounded-full bg-sky-500 shadow-lg shadow-sky-500/50"></div>
</div>

Rings and dividers

A ring is an outline drawn with box-shadow, ideal for focus states: ring-2 ring-sky-500 ring-offset-2. divide-y adds borders between children, which is perfect for lists.

Dividers and ringsTry it yourself

<div class="p-6">
  <ul class="max-w-sm divide-y divide-gray-200 rounded-xl border border-gray-200 bg-white">
    <li class="p-4">Inbox</li>
    <li class="p-4">Drafts</li>
    <li class="p-4">Archive</li>
  </ul>
  <button class="mt-6 rounded-lg bg-white px-4 py-2 ring-2 ring-sky-500 ring-offset-2">Ring with offset</button>
</div>

Test yourself

Which class puts a border between list items but not around the list?

divide-y
border-y
space-y
ring-y

Show answer

Answer: divide-y

divide-* adds borders between children.

Was this page helpful?