Border & Rounded — Tailwind CSS

Border width: border, border-2, border-4, border-8 Per sisi: border-t, border-r, border-b, border-l Border color: border-gray-200, border-red-500, dll. Border…

Border adalah garis tepi di sekeliling elemen, dan rounded membulatkan sudut-sudutnya. Di Tailwind keduanya class terpisah: border memasang garisnya, border-gray-300 mewarnainya, rounded-xl membulatkan sudutnya. Bayangin bingkai foto di meja. Kamu pilih tebal bingkainya, warnanya, dan sudutnya mau lancip atau tumpul. Tiga pilihan, tiga class.

🧪 Tebakan cepat: tombol 192 × 48px dikasih rounded-full. Jadinya elips, atau bentuk pil? Tebak dulu, jawabannya ada di bagian "rounded-full: pil dan lingkaran".

Kartu dengan garis tepi

Ini kartu dari latihan:

<div id="card" class="border border-gray-300 rounded-xl p-4">
  Kartu dengan border
</div>

Class	CSS yang dibuat Tailwind	Hasilnya
`border`	`border-width: 1px` dan `border-style: solid`	garis 1px
`border-gray-300`	`border-color: var(--color-gray-300)`	abu-abu muda
`rounded-xl`	`border-radius: var(--radius-xl)`	`0.75rem` = 12px
`p-4`	`padding: calc(var(--spacing) * 4)`	16px

border memasang garisnya. Tanpa class ini gak ada garis, karena preflight Tailwind membuat semua elemen mulai dengan tebal garis 0.
border-gray-300 cuma memberi warna. Di Tailwind v4, border tanpa class warna memakai warna teks elemennya (currentColor), biasanya hitam, jadi pasang warnanya sendiri.
rounded-xl membulatkan keempat sudut 12px, dan p-4 memberi ruang 16px di dalam supaya teksnya gak nempel ke garis.

Tebal garis dan sisinya

Class	CSS
`border`	`border-width: 1px`
`border-2`	`border-width: 2px`
`border-4`	`border-width: 4px`
`border-8`	`border-width: 8px`
`border-t`, `border-r`, `border-b`, `border-l`	garis 1px di atas, kanan, bawah, atau kiri saja
`border-b-2`	garis bawah 2px
`border-x`, `border-y`	kiri dan kanan, atas dan bawah

Angka di border-2 itu piksel, bukan langkah 4px seperti spacing. border-b membuat border-bottom-width: 1px, cocok buat garis bawah judul.

Skala rounded

Class	border-radius
`rounded-none`	0
`rounded-xs`	2px
`rounded-sm`	4px
`rounded-md`	6px
`rounded-lg`	8px
`rounded-xl`	12px
`rounded-2xl`	16px
`rounded-3xl`	24px
`rounded-full`	sebesar mungkin

Sudut tertentu saja: rounded-t-lg (dua sudut atas), rounded-b-lg (dua sudut bawah), rounded-tl-lg (kiri atas), rounded-br-md (kanan bawah). Hati-hati dengan tutorial v3: di sana rounded-sm 2px, di v4 namanya geser dan rounded-sm jadi 4px.

rounded-full: pil dan lingkaran

rounded-full membuat border-radius: calc(infinity * 1px), angka raksasa. Kalau radius sudut lebih besar dari kotaknya, browser mengecilkannya sampai pas, yaitu setengah sisi terpendek. Hasilnya:

Persegi 96 × 96px (size-24 rounded-full) jadi lingkaran: tiap radius dipotong jadi 48px.
Tombol 192 × 48px (w-48 h-12 rounded-full) jadi pil: tiap radius dipotong jadi 24px, setengah tingginya. Ujung kiri dan kanannya setengah lingkaran, sisi atas dan bawahnya tetap lurus. Bukan elips. Itu jawaban tebakannya.

Beda dengan border-radius: 50% di CSS biasa, yang di kotak memanjang menghasilkan elips. Jadi rounded-full bikin lingkaran penuh cuma kalau lebar dan tingginya sama.

💡 Ring dan divide

<input class="rounded-md border border-gray-300 ring-2 ring-blue-500">

<ul class="divide-y divide-gray-200">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

ring-2 ring-blue-500 menggambar garis luar 2px biru lewat box-shadow. Beda dengan border, ring gak makan tempat, jadi elemen di sekitarnya gak bergeser. Sering dipakai buat penanda fokus.
divide-y divide-gray-200 memasang garis 1px di antara anak-anaknya, tanpa garis di bawah item terakhir.

⚠️ Jebakan yang sering ketemu

Warna tanpa border. border-gray-300 sendirian gak menggambar apa-apa, tebal garisnya masih 0. Pasang border juga.
border tanpa warna. Di v4 garisnya ikut warna teks (currentColor), biasanya hitam. Tutorial v3 bilang abu-abu muda, itu sudah berubah. Tulis warnanya: border-gray-300.
Meleset satu tingkat rounded. Latihan minta radius 12px, itu rounded-xl. rounded-lg cuma 8px, rounded-2xl 16px.
border-bottom sebagai class. Itu nama properti CSS. Class Tailwind-nya border-b.

TL;DR: border memasang garis 1px (border-2, border-4, border-8 lebih tebal, angkanya piksel), border-t, border-r, border-b, border-l buat satu sisi, dan border-gray-300 mewarnainya. Di v4 border tanpa warna ikut warna teks, dan warna tanpa border gak menggambar apa-apa, jadi pasang keduanya. Sudut pakai rounded-*: rounded-lg 8px, rounded-xl 12px, rounded-2xl 16px, dan rounded-t-lg buat sudut atas saja. rounded-full membuat persegi jadi lingkaran dan kotak memanjang jadi pil. Kartu latihan: border border-gray-300 rounded-xl p-4 = garis 1px abu-abu, radius 12px, padding 16px. ring-* menggambar garis luar tanpa makan tempat, divide-y memasang garis di antara anak-anak.