ในการกำหนดรูปแบบของเส้นขอบ ให้ใช้ border-style คุณสมบัติ. คุณสมบัติ border-style ให้คุณเลือกรูปแบบเส้นขอบต่อไปนี้:
- ไม่มี: ไม่มีพรมแดน
- แข็ง: เส้นขอบเป็นเส้นทึบเส้นเดียว
- จุด: เส้นขอบคือชุดของจุด
- ประ: เส้นขอบคือชุดของบรรทัดสั้นๆ
- สองเท่า: เส้นขอบเป็นเส้นทึบสองเส้น
- ร่อง: เส้นขอบดูเหมือนแกะสลักในหน้า
- สัน: เส้นขอบมีลักษณะตรงกันข้ามกับร่อง
- สิ่งที่ใส่เข้าไป: เส้นขอบทำให้กล่องดูเหมือนฝังอยู่ในหน้า
- จุดเริ่มต้น: เส้นขอบทำให้กล่องดูเหมือนออกมาจากผ้าใบ
- ซ่อน: เหมือนกับไม่มี ยกเว้นในแง่ของการแก้ปัญหาความขัดแย้งชายแดนสำหรับองค์ประกอบตาราง
ตัวอย่าง
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อกำหนดรูปแบบของเส้นขอบ:
<html> <head> </head> <body>. <p style = "border-width:4px; border-style:none;"> This is a border with none width. </p> <p style = "border-width:4px; border-style:solid;"> This is a solid border. </p> <p style = "border-width:4px; border-style:dashed;"> This is a dashed border. </p> <p style = "border-width:4px; border-style:double;"> This is a double border. </p> <p style = "border-width:4px; border-style:groove;"> This is a groove border. </p> </body> </html>
