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

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

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

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

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

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

Результат:

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