css border style
เส้นขอบ (border) ใน CSS เป็นคุณสมบัติที่ใช้ในการกำหนดลักษณะของเส้นขอบรอบองค์ประกอบ HTML. คุณสมบัติ border เป็นคุณสมบัติย่อ (shorthand property) ที่ช่วยให้คุณกำหนดความกว้าง, รูปแบบ, และสีของเส้นขอบได้ในการประกาศเดียว.
รายละเอียดเพิ่มเติม:
border-width:
กำหนดความกว้างของเส้นขอบ. สามารถใช้ค่าเป็นพิกเซล (px), em, หรือค่า ที่กำหนดไว้ล่วงหน้า เช่น thin, medium, หรือ thick.
border-style:
กำหนดรูปแบบของเส้นขอบ เช่น เส้นทึบ (solid), เส้นประ (dotted), เส้นประ (dashed), หรือเส้นคู่ (double).
border-color:
กำหนดสีของเส้นขอบ. สามารถใช้ค่าสีเป็นชื่อสี (เช่น red, blue), รหัสสี (เช่น #000000 ), หรือค่า RGB/RGBA.
การใช้งาน:
คุณสามารถใช้คุณสมบัติ border เพื่อกำหนดเส้นขอบให้กับองค์ประกอบทั้งหมด หรือใช้คุณสมบัติย่อย เช่น border-top, border-right, border-bottom, และ border-left เพื่อกำหนดเส้นขอบเฉพาะด้าน.
border-radius:
คุณสมบัติ border-radius ใช้ในการกำหนดความโค้งมนของมุมของเส้นขอบ.
ตัวอย่าง:
โค้ด
.element {
border: 2px solid red; /* เส้นขอบสีแดงหนา 2px */ border-radius: 5px; /* มุมโค้งมนรัศมี 5px */
}
ถ้าคุณกำลังค้นคำว่า “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 เร็วขึ้นมากค่ะ
🤩