เว็บไซต์ไหนๆ ก็มีการใช้คำสั่ง Border หรือการตีเส้นของกรอบภาพ กรอบข้อความ และถ้าคุณยังใช้คำสั่งนี้ยังไม่ถูกต้องหรือเข้าใจแต่ไม่ละเอียด สามารถเรียนรู้การใช้งานได้จากบทความนี้ เพราะเรากำลังจะนำคำสั่งของการตีกรอบ border มาอธิบายกันให้หมดเปลือก ด้วยคำสั่ง CSS Border แล้วคุณจะเข้าใจว่า คำสั่ง border มีอะไรให้เลือกไช้ได้หลากหลายอย่างจริงๆ

คุณเคยใช้คำสั่ง border ในการตีตารางแบบไหนบ้าง แบบเส้นประ หรือเส้นธรรมดา

ตัวอย่างการใช้ CSS border-style property

ขออธิบายล่วงหน้าก่อนที่จะเข้าดูตัวอย่างคำสั่งการตีกรอบ border คำสั่งเริ่มต้นด้วย border-style และตามด้วย การตีเส้นแต่ละด้าน ประกอบด้วย

• Top หมายถึง การตีเ้ส้นด้านบน
• Right หมายถึง การตีเส้นด้านขวา
• Bottom หมายถึง การตีเ้้ส้นด้านล่าง
• Left หมายถึง การตีเส้นทางซ้ายมือ

ดังนั้น ถ้ามีการกำหนดคำสั่ง หลัง border-style แสดงว่า มีการกำหนดลักษณะของเส้นของตาราง ตามลำดับข้างต้น

• border-style:dotted solid double dashed;
  • top border is dotted
  • right border is solid
  • bottom border is double
  • left border is dashed
• border-style:dotted solid double;
  • top border is dotted
  • right and left borders are solid
  • bottom border is double
• border-style:dotted solid;
  • top and bottom borders are dotted
  • right and left borders are solid
• border-style:dotted;
  • all four borders are dotted

ลักษณะของเส้นที่สามารถใช้ตีตารางได้

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

คุณทราบหรือไม่ว่า ความพิเศษของคำสั่ง border คืออะไร คำตอบก็คือ เราสามารถเลือก style ของการตีกรอบ หลายๆ อย่างรวมกันได้ด้วย ตัวอย่างเช่น ด้านบนตีตารางด้วยเส้นประ ด้านล่างตีด้วยเส้นแบบต่อเนื่อง เป็นต้น