พื้นฐานการทำงานกับเส้นขอบใน CSS

ตอนนี้เราจะเรียนรู้วิธีการเพิ่มเส้นขอบให้กับองค์ประกอบ ทำได้โดยใช้คุณสมบัติสามประการ: คุณสมบัติ border-width กำหนดความหนาของเส้นขอบ, border-color - สี, และ border-style กำหนดประเภทของเส้นขอบ

สองคุณสมบัติแรกทำงานในลักษณะที่คาดเดาได้: border-color รับค่าในรูปแบบเดียวกันกับคุณสมบัติ color, ส่วนความหนาของเส้นขอบกำหนดเป็นพิกเซล ส่วน คุณสมบัติ border-style รับค่า เป็นคำสำคัญ (keyword) ตัวอย่างเช่น, ค่า solid กำหนดให้เป็นเส้นทึบ

ลองสร้างเส้นขอบที่มีความหนา 3 พิกเซล เป็นเส้นทึบ สีแดง:

<div id="elem"></div>

#elem {
	border-width: 3px;    /* ความหนา 3px */
	border-style: solid;  /* เป็นเส้นทึบ */
	border-color: red;    /* สีแดง */
	width: 300px;
	height: 100px;
}

ในบทเรียนถัดไป เราจะพูดถึงการทำงาน กับเส้นขอบอย่างละเอียดมากขึ้น