Border, Kedalaman & Bayangan

Kenapa ini penting

Border dan bayangan memberi struktur dan kedalaman. Border memisahkan area (misalnya antar baris tabel), sudut membulat membuat antarmuka terasa ramah, dan bayangan memberi kesan "melayang", sehingga pengguna tahu elemen mana yang bisa diklik atau sedang berada di atas (modal, dropdown).

Di Tailwind v4 ada beberapa perubahan nama dan perilaku dibanding v3 yang sering menjebak orang yang belajar dari tutorial lama. Modul ini membahas semuanya: border, rounded, ring, shadow, outline, dan divide.

Konsep inti

Border

• Lebar: border (1px), border-2, border-4, border-0. Per sisi: border-t, border-b-2, border-x.
• Warna: border-gray-200, border-indigo-500/40.
• Gaya: border-dashed, border-dotted, border-double.

Perubahan v4 penting: warna border default sekarang currentColor (warna teks), bukan abu-abu muda seperti di v3. Jadi border saja akan berwarna hitam kalau teksnya hitam. Biasakan selalu menyertakan warna: border border-gray-200.

Rounded

Skala v4: rounded-xs, rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full (lingkaran/pil), rounded-none. Per sudut: rounded-t-lg, rounded-br-xl.

Perhatikan pergeseran nama dari v3: yang dulu rounded-sm kini rounded-xs, dan yang dulu rounded kini rounded-sm. Hal yang sama terjadi pada shadow.

Shadow

Skala v4: shadow-2xs, shadow-xs, shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-none. Warna bayangan bisa diatur: shadow-lg shadow-indigo-500/30 memberi bayangan berwarna ungu lembut, cocok untuk tombol utama. Ada juga inset-shadow-* untuk bayangan ke dalam (efek tertekan) dan drop-shadow-* (filter yang mengikuti bentuk gambar PNG/SVG transparan).

Analogi: shadow kecil seperti kertas yang tergeletak di meja, shadow besar seperti kertas yang diangkat tinggi. Semakin "penting" atau "di atas" elemennya, semakin besar bayangannya.

Ring

Ring adalah garis di luar elemen yang dibuat dengan box-shadow, sehingga tidak menggeser layout dan mengikuti rounded. Cocok untuk cincin fokus dan penanda pilihan. ring di v4 = 1px (di v3 = 3px); untuk tebal 3px tulis ring-3. Warna: ring-indigo-500. Jarak: ring-offset-2 ring-offset-white. Ada juga inset-ring untuk ring di bagian dalam.

Outline

Outline adalah properti CSS outline, juga tidak menggeser layout. outline-2, outline-offset-2, outline-indigo-600, outline-dashed. Untuk menyembunyikan outline bawaan browser sambil tetap aman di mode forced colors (mode kontras tinggi Windows), pakai outline-hidden. Banyak tim memakai focus-visible:outline-2 focus-visible:outline-offset-2 sebagai standar cincin fokus.

Divide

divide-y memberi border di antara anak-anak secara vertikal (tidak di atas yang pertama), divide-x untuk horizontal. Warna: divide-gray-200. Sangat praktis untuk daftar dan menu.

Contoh kode

<!-- Border selalu dengan warna eksplisit (v4: default-nya currentColor) -->
<div class="rounded-lg border border-gray-200 p-4">Kartu dengan border abu</div>
<div class="rounded-lg border-2 border-dashed border-gray-300 p-8 text-center text-gray-500">
  Seret file ke sini
</div>

<!-- Skala rounded -->
<div class="flex gap-3">
  <div class="size-16 rounded-xs bg-sky-400"></div>
  <div class="size-16 rounded-lg bg-sky-400"></div>
  <div class="size-16 rounded-3xl bg-sky-400"></div>
  <div class="size-16 rounded-full bg-sky-400"></div>
</div>

<!-- Shadow berwarna untuk tombol utama -->
<button class="rounded-xl bg-indigo-600 px-6 py-3 font-semibold text-white shadow-lg shadow-indigo-500/40 hover:shadow-xl">
  Mulai Gratis
</button>

<!-- Ring untuk menandai kartu terpilih tanpa menggeser layout -->
<div class="grid grid-cols-2 gap-4">
  <label class="cursor-pointer rounded-xl border border-gray-200 p-4 has-checked:ring-2 has-checked:ring-indigo-500">
    <input type="radio" name="paket" class="sr-only" checked />
    <p class="font-semibold">Bulanan</p>
    <p class="text-sm text-gray-500">Rp99.000</p>
  </label>
  <label class="cursor-pointer rounded-xl border border-gray-200 p-4 has-checked:ring-2 has-checked:ring-indigo-500">
    <input type="radio" name="paket" class="sr-only" />
    <p class="font-semibold">Tahunan</p>
    <p class="text-sm text-gray-500">Rp990.000</p>
  </label>
</div>
<!-- → kartu yang radio-nya terpilih mendapat cincin ungu (variant has-checked:) -->

<!-- Cincin fokus dengan outline -->
<a href="#" class="rounded-md px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
  Tautan aksesibel
</a>

<!-- Avatar bertumpuk dengan ring putih sebagai pemisah -->
<div class="flex -space-x-3">
  <img class="size-10 rounded-full ring-2 ring-white" src="https://i.pravatar.cc/80?img=1" alt="" />
  <img class="size-10 rounded-full ring-2 ring-white" src="https://i.pravatar.cc/80?img=2" alt="" />
  <img class="size-10 rounded-full ring-2 ring-white" src="https://i.pravatar.cc/80?img=3" alt="" />
</div>

<!-- divide-y: garis di antara item daftar -->
<ul class="divide-y divide-gray-200 rounded-lg border border-gray-200">
  <li class="p-4">Profil</li>
  <li class="p-4">Keamanan</li>
  <li class="p-4">Notifikasi</li>
</ul>
<!-- → tiga baris dengan garis pemisah di antaranya, tanpa garis ganda -->

<!-- Inset shadow untuk input yang tampak "tertanam" -->
<input class="rounded-lg bg-gray-100 px-3 py-2 inset-shadow-sm" placeholder="Cari..." />

Kesalahan umum

1. Menulis border tanpa warna lalu kaget garisnya hitam. Di v4 default-nya currentColor; tambahkan border-gray-200.
2. Memakai nama v3 untuk shadow dan rounded. shadow-sm v3 kini shadow-xs, shadow v3 kini shadow-sm. Periksa ulang saat menyalin kode lama.
3. Mengira ring masih 3px. Di v4 ring = 1px; pakai ring-3 untuk tebal lama.
4. Memakai border untuk state terpilih, yang membuat elemen bergeser 1-2px. Gunakan ring atau outline.
5. Menghapus outline fokus tanpa pengganti. Pengguna keyboard tidak tahu posisinya. Selalu sediakan focus-visible: ring atau outline.

Latihan

1. Mudah, Buat kartu dengan border 1px abu-abu muda, sudut rounded-2xl, dan bayangan shadow-md.
2. Sedang, Buat daftar 4 pesan masuk dengan divide-y, di mana pesan yang belum dibaca memiliki border kiri biru 4px.
3. Menantang, Buat tombol ikon bulat 44px yang saat difokus keyboard menampilkan ring 2px biru dengan offset 2px, dan saat hover bayangannya membesar.

<div class="rounded-2xl border border-gray-200 p-6 shadow-md">Isi kartu</div>

<ul class="divide-y divide-gray-200 rounded-lg border border-gray-200">
  <li class="border-l-4 border-l-blue-500 p-4 font-semibold">Tagihan bulan ini sudah terbit</li>
  <li class="p-4">Selamat datang di aplikasi</li>
  <li class="border-l-4 border-l-blue-500 p-4 font-semibold">Pesanan sedang dikirim</li>
  <li class="p-4">Kata sandi berhasil diubah</li>
</ul>

<button
  aria-label="Tambah"
  class="grid size-11 cursor-pointer place-items-center rounded-full bg-white text-xl shadow-sm transition
         hover:shadow-lg focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
>
  +
</button>

Ringkasan

• Di v4 warna border default adalah currentColor; selalu sertakan warna border.
• Skala rounded dan shadow bergeser satu tingkat dari v3 (shadow-sm lama = shadow-xs).
• ring (box-shadow) dan outline tidak menggeser layout, cocok untuk fokus dan pilihan; ring v4 = 1px.
• Shadow bisa berwarna (shadow-indigo-500/40), ada juga inset-shadow-* dan drop-shadow-*.
• divide-y/divide-x memberi garis pemisah di antara anak.