CSS Border คำสั่งที่ใช้บ่อย
เว็บไซต์ไหนๆ ก็มีการใช้คำสั่ง 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 ของการตีกรอบ หลายๆ อย่างรวมกันได้ด้วย ตัวอย่างเช่น ด้านบนตีตารางด้วยเส้นประ ด้านล่างตีด้วยเส้นแบบต่อเนื่อง เป็นต้น