การใส่กรอบ border ให้กับแท็กต่าง ๆ โดยใช้ CSS

ในบทความนี้ เรามาดูวิธีใส่ขอบให้กับแท็กต่าง ๆ โดยใช้ CSS กันครับ ซึ่งการใส่กรอบนั้น จะทำให้เว็บดูดี สวยงาม เป็นสัดส่วน น่าใช้งานครับ ดูตัวอย่าง วิธีการใช้งาน และการกำหนดค่าต่าง ๆ ได้ตามด้านล่างครับ

ตัวอย่างการใส่กรอบให้กับ div

การกำหนดตำแหน่งของ border

การกำหนดตำแหน่งของ border สามารถกำหนดได้หลายวิธี เช่น

 
กำหนด border ทั้งหมด
 

 
กำหนด border ด้านซ้าย
 

 
กำหนด border ด้านขวา
 

 
กำหนด border ด้านบน
 

 
กำหนด border ด้านล่าง
 

การกำหนด Style ให้กับ border

การกำหนด style เป็นการกำหนดรูปแบบของขอบ

 
กำหนด Style แบบ groove
 

 
กำหนด Style แบบ ridge
 

 
กำหนด Style แบบ inset
 

 
กำหนด Style แบบ outset
 

 
กำหนด Style แบบ double
 

 
กำหนด Style แบบ dashed
 

จากที่ได้ยกตัวอย่างไปเป็นเพียงส่วนหนึ่งของ style เท่านั้น ไว้เดี๋ยวค่อยมาดู style ทั้งหมดอีกรอบในบทความต่อ ๆ ไปครับ

จากการเซต style ที่ผ่านมาเป็นการเซ็ตแบบย่อ เรามาดูวิธีเซตแบบเต็มกันครับ ตามตัวอย่างด้านล่างเลย

 
Buttom border red solid 5px
 

 
Buttom border red solid 5px
 

 
Buttom border red solid 5px
 

 
Buttom border red solid 5px
 

 
 Buttom border red solid 5px