คุณสมบัติเส้นขอบ CSS ใช้เพื่อกำหนดคุณสมบัติเส้นขอบสำหรับองค์ประกอบ มันเป็นชวเลขสำหรับความกว้างของเส้นขอบ สไตล์เส้นขอบ และสีเส้นขอบ กำหนดรูปแบบเส้นขอบสำหรับแต่ละด้านได้ และกำหนดรัศมีเส้นขอบได้
ในทางกลับกัน โครงร่าง CSS จะไม่กินเนื้อที่และจะแสดงรอบๆ เส้นขอบหากมีการตั้งค่าไว้ รองรับการชดเชย นอกจากนี้ เราไม่สามารถระบุได้ว่าแต่ละด้านควรมีโครงร่างหรือไม่
โดยค่าเริ่มต้น ทั้งเส้นขอบและโครงร่างจะไม่แสดง
ไวยากรณ์
ไวยากรณ์สำหรับคุณสมบัติเส้นขอบและเค้าร่าง CSS มีดังต่อไปนี้ -
Selector { border: /*value*/ outline: /*value*/ }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติเส้นขอบและโครงร่าง CSS -
<!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>Example</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>Demo Heading</h2> <p>This is demo text surrounded by border and outline.</p> </body> </html>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -