css border style

ถ้าคุณกำลังค้นคำว่า “border” แล้วงงว่าต้องเริ่มจากตรงไหน เราแนะนำให้จำเป็นสูตรสั้น ๆ ก่อนเลยว่า border คือการเขียน “ความหนา + รูปแบบ + สี” ในบรรทัดเดียว เช่น .element { border: 2px solid red; } แต่มีจุดที่มือใหม่พลาดบ่อยคือ “border-style ต้องมี” ถ้าเรากำหนดแค่ border-width หรือ border-color อย่างเดียว บางครั้งเส้นขอบจะไม่แสดง เพราะค่าเริ่มต้นของ border-style คือ none นั่นเอง ดังนั้นถ้าอยากให้ขึ้นแน่นอน ให้ใส่ style ไปด้วยเสมอ เช่น solid อีกอย่างที่ใช้งานจริงบ่อยมากคือการกำหนดเส้นขอบเฉพาะด้าน เช่นอยากทำเส้นใต้เหมือนไฮไลต์หัวข้อ ใช้แบบนี้จะเนียนกว่าใส่กรอบทั้งกล่อง h2 { border-bottom: 2px solid #000; } หรือถ้าทำการ์ด (card UI) แล้วอยากให้ดูเบา ๆ ลองใช้สีโปร่งด้วย rgba .card { border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; } ส่วน border-style นอกจาก dotted/dashed/solid/double ที่เจอบ่อย ยังมีสไตล์ที่ดูมีมิติ เช่น groove, ridge, inset, outset และ hidden/none ซึ่งเหมาะกับงานทดลองหรือทำเดโมให้เห็นความต่างของเส้นขอบ แต่ในการทำเว็บจริง ๆ เรามักเลือก solid/dashed เป็นหลักเพราะอ่านง่ายและเข้ากับดีไซน์ส่วนใหญ่ ทิปเล็ก ๆ ที่ช่วยจัดการงานไวขึ้น: ถ้าอยากกำหนด “ความหนาเท่ากันทุกด้าน แต่สีคนละด้าน” เราสามารถกำหนดแยกได้ เช่น .box { border-style: solid; border-width: 2px; border-color: red green blue black; } ลำดับสีจะเป็น บน-ขวา-ล่าง-ซ้าย (top right bottom left) แบบเดียวกับ padding/margin สุดท้าย ถ้าเส้นขอบดูชิดเนื้อหามากเกินไป อย่าลืมเพิ่ม padding เพราะ border จะอยู่ติดกับ content ทันที เช่น .badge { border: 1px dashed #ff4d4f; padding: 6px 10px; border-radius: 999px; } ลองเอาตัวอย่างพวกนี้ไปปรับกับองค์ประกอบจริงในหน้าเว็บ แล้วจะเข้าใจ border เร็วขึ้นมากค่ะ