Effects & Visuals

1. Core Idea

border-radius ใช้ปรับมุมของกล่องให้โค้งขึ้น โดยไม่เปลี่ยนขนาดจริงของ element และไม่เพิ่มระยะห่างรอบกล่อง เหมาะกับ card, button, avatar, badge และ chip

• ค่า 0 ทำให้มุมเป็นเหลี่ยมตามปกติ
• ค่า px เช่น 8px หรือ 12px ทำให้มุมโค้งแบบคงที่
• ค่า 50% ใช้ทำวงกลมเมื่อ element กว้างและสูงเท่ากัน
• ค่า 9999px ใช้ทำ pill shape สำหรับ badge หรือ chip

2. Mental Model

ให้นึกถึงการตัดมุมกระดาษ ยิ่งตัดมุมมาก กล่องยิ่งดูนุ่มขึ้น แต่กระดาษยังมีขนาดเดิม CSS ก็คล้ายกัน: border-radius เปลี่ยนรูปทรงที่มองเห็น ไม่ได้เปลี่ยน width, height, padding หรือ margin

3. Rule / Definition

.card {
  border-radius: 12px;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.chip {
  border-radius: 9999px;
}

4. Worked Example

• เริ่มจากดูว่า element เป็นอะไร ถ้าเป็น card ให้เริ่มที่ 12px
• ถ้า element เป็น avatar และ width เท่ากับ height ให้ใช้ 50%
• ถ้าเป็น label สั้น ๆ ที่อยากให้ปลายมนมาก ให้ใช้ 9999px
• ตรวจว่าค่าที่เลือกยังเข้ากับ element รอบข้าง ไม่โดดจากระบบภาพรวม

5. Code Example

6. Recap

• border-radius เปลี่ยนความโค้งของมุม ไม่เปลี่ยน layout
• ใช้ px เมื่อต้องการความโค้งคงที่
• ใช้ 50% กับ avatar หรือ shape ที่กว้างและสูงเท่ากัน
• ใช้ 9999px เมื่อต้องการ pill shape

Lab 1: ปัดมุม card

เป้าหมาย: ใช้ border-radius กับ card หนึ่งใบให้มุมโค้งแบบพอดี

Lab 2: ทำ avatar วงกลม

เป้าหมาย: ใช้ border-radius: 50% กับ element ที่ width และ height เท่ากัน

Lab 3: ทำ chip ทรง pill

เป้าหมาย: ใช้ค่า radius สูงมากเพื่อทำ chip ให้ปลายมนเต็มที่