Chapter 6 — Chegara va Burchak Yumaloqligi

---

6.1 Border Klasslari

Example

index.html
HTMLNusxalash
01<div class="border border-gray-200 rounded-xl shadow-sm divide-y divide-gray-100">
02  <div class="p-4">Qator 1</div>
03  <div class="p-4">Qator 2</div>
04</div>

6.2 Radius

Example

index.html
HTMLNusxalash
01<img class="w-16 h-16 rounded-full border-4 border-white shadow-lg">

Mental Model

🧠 rounded-full faqat KVADRAT (teng w/h) elementlarda to'liq doira beradi, aks holda oval chiqadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: border-2 border-blue-500 rounded-lg p-4 bilan quti yarating.

🟡 Exercise 2 — Medium

Task: Avatar ramkasi yarating (w-16 h-16 rounded-full border-4 border-white shadow-lg).

🔴 Exercise 3 — Hard

Task: Sozlamalar ro'yxati komponentini yarating: divide-y divide-gray-100, har qatorda ikonka + matn + o'ng tomonda strelka.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div class="grid grid-cols-2 divide-x">
02  <div>Chap</div>
03  <div>O'ng</div>
04</div>

Your Task: divide-x grid'da nega ishlamayapti (yoki kutilganidek ko'rinmayapti)?

<details> <summary>Solution</summary> `divide-x/y` asosan flex va oddiy block elementlar uchun mo'ljallangan; grid'da to'g'ri ishlashi uchun `grid-flow-col` yoki alohida `border-r` qo'shish kerak bo'lishi mumkin — grid katakchalarida divide ba'zan kutilmagan natija beradi. </details>

---

📌 Chapter Summary

rounded-full faqat teng w/h elementlarda to'liq doira beradi. divide-y/x bolalar orasiga avtomatik chegara chizadi, alohida border-b yozishga hojat qoldirmaydi.

🎯 Key Takeaways

• Radius kattaligi elementning "og'irligi"ga mos bo'lishi kerak
• Avatar → rounded-full, karta/modal → rounded-lg/xl
• divide-* va mavjud border-*ni birga ishlatmang (dublikat)

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Chegara:  border, border-2, border-{color}-{shade}
02Radius:   rounded-{none|sm|md|lg|xl|2xl|full}
03Ajratish: divide-y, divide-x

---