คุณสมบัติ border ใน CSS ใช้สำหรับกำหนดคุณสมบัติขอบสำหรับองค์ประกอบ เป็นคุณสมบัติแบบย่อสำหรับ border-width, border-style และ border-color ขอบสำหรับแต่ละด้านสามารถจัดรูปแบบได้และ border-radius ก็สามารถระบุได้เช่นกัน
ในทางกลับกัน outline ใน CSS ไม่ใช้พื้นที่ และแสดงรอบขอบถ้าตั้งค่าไว้ รองรับ offset อีกด้วย นอกจากนี้ เราไม่สามารถระบุได้ว่าด้านใดควรมี outline หรือไม่
โดยค่าเริ่มต้น ทั้ง borders และ outlines ไม่ได้แสดง
ไวยากรณ์
ไวยากรณ์สำหรับคุณสมบัติ CSS border และ outline ดังนี้:
Selector { border: /*value*/ outline: /*value*/ }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS border และ outline:
<!DOCTYPE html> <html> <head> <style> div { margin: 15px; padding: 20px; width: 35%; border: thin solid green; outline-width: 5px; outline-style: ridge; outline-color: fuchsia; border-radius: 50px; } </style> </head> <body> <h2>ตัวอย่าง</h2> <div>This is it!</div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่างเพิ่มเติม
<!DOCTYPE html> <html> <head> <style> p { margin: 40px; padding: 12px; width: 30%; border: thick dashed green; outline: 5px inset; outline-color: fuchsia; } </style> </head> <body> <h2>หัวข้อสาธิต</h2> <p>This is demo text surrounded by border and outline.</p> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
