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

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



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


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




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

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

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

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

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

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

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

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

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

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

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




การกำหนด Style ให้กับ border
การกำหนด style เป็นการกำหนดรูปแบบของขอบ

กำหนด Style แบบ groove

กำหนด Style แบบ groove

กำหนด Style แบบ ridge

กำหนด Style แบบ ridge

กำหนด Style แบบ inset

กำหนด Style แบบ inset

กำหนด Style แบบ outset

กำหนด Style แบบ outset

กำหนด Style แบบ double

กำหนด Style แบบ double

กำหนด Style แบบ dashed

กำหนด 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

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