การใช้งาน CSS Border

CSS Borders เป็นคุณสมบัติที่ใช้ในการกำหนดขอบขององค์ประกอบ (element) ในหน้าเว็บ เราสามารถปรับแต่งลักษณะของขอบได้หลายแบบ ทั้งความหนา สี และสไตล์

โครงสร้างของ CSS Borders

การกำหนดขอบใน CSS สามารถระบุได้ผ่านคุณสมบัติหลักๆ ดังนี้

border-width กำหนดความหนาของขอบ

border-style กำหนดสไตล์ของขอบ เช่น เส้นทึบ, เส้นประ เป็นต้น

border-color กำหนดสีของขอบ

หรือสามารถใช้ border เพียงตัวเดียวในการกำหนดทั้ง 3 ค่าพร้อมกัน

ตัวอย่างการกำหนด border แบบละเอียด

div {
  border-width: 2px;    /* ความหนาของขอบ */
  border-style: solid;  /* สไตล์ของขอบ */
  border-color: red;    /* สีของขอบ */
}

หรือใช้รูปแบบย่อ

div {
  border: 2px solid red;  /* กำหนดความหนา, สไตล์ และสีในบรรทัดเดียว */
}

border-style ที่สามารถใช้งานได้

• none ไม่มีขอบ
• solid เส้นทึบ
• dashed เส้นประ
• dotted จุด
• double เส้นคู่
• groove เส้นที่มีเงาแสดงลึกเข้าไป (แบบร่อง)
• ridge เส้นที่มีเงานูนขึ้นมา
• inset เส้นที่มีลักษณะเหมือนถูกกดเข้าไป
• outset เส้นที่ดูเหมือนยื่นออกมา

ตัวอย่าง

div {
  border-style: dashed;
}

border-width

สามารถกำหนดความหนาได้โดยใช้ค่าหน่วยเช่น px, em, หรือจะใช้คำที่เป็น predefined อย่างเช่น thin, medium, หรือ thick

div {
  border-width: 5px;
}

border-color

สามารถระบุสีของขอบได้เช่นเดียวกับการกำหนดสีใน CSS เช่นชื่อสี (red, blue), รหัสสี (เช่น #ff0000), หรือ rgba() เพื่อให้มีการโปร่งใส

div {
  border-color: #00ff00;
}

การกำหนดขอบด้านเดียว

เราสามารถกำหนดขอบเฉพาะบางด้านขององค์ประกอบได้ เช่น

• border-top ขอบด้านบน
• border-right ขอบด้านขวา
• border-bottom ขอบด้านล่าง
• border-left ขอบด้านซ้าย

div {
  border-top: 2px solid blue;
}

การใช้ border-radius

ใช้สำหรับทำขอบให้โค้งมน

div {
  border: 2px solid blue;
  border-radius: 10px;  /* ทำมุมขอบโค้ง */
}

ตัวอย่างการใช้งานจริง

div {
  border: 5px dotted green;
  border-radius: 15px;
}

ในตัวอย่างข้างต้น ขอบจะเป็นเส้นประสีเขียว และมีมุมโค้ง 15px

สรุปคือ การใช้ CSS Borders สามารถปรับแต่งขอบได้หลายรูปแบบตามความต้องการ โดยสามารถกำหนดความหนา สไตล์ สี และการโค้งของขอบได้